前端开发

本文实例讲述了javascript实现下班倒计时效果的方法。分享给大家供大家参考。具体如下：

周末了，搞个下班倒计时，娱乐下。

确保下面三点：

1、非IE浏览器，较高Chrome版本，已开启HTML5桌面通知。具体设置见下面截图 
2、将这个HTML放到本地Web服务器上测试，直接双击运行无法弹出桌面通知

顺带提下，这个程序很容易扩展成定时通知。

做这个东西的过程有两点比较纠结，总结下：

1、parseInt("09")返回的是0。正确做法是parseInt("09", 10)，显式指定基数为十进制 
2、false与"false"，这个也有点小纠结，开始我这样 
$("#minute").attr("readonly", "false"); 
但达不到效果，因为实际上readonly属性只有两个值true或false，所以如果我设置它的值为"false"，那么相当于设置（非空字符串转成布尔类型为true）: 
$("#minute").attr("readonly", true);

更新：

修复了一些小Bug，体会到这句话”看起来很简单的东西也不是那么容易“。

运行效果如下图所示：

  
  
  
  
    body {
      color:#333;
      font-family:meiryo, Arial, Helvetica, sans-serif;
      font-size:12px;
      height:100%;
      margin:0 auto;
      padding:0;
      width:100%;
    }
    html,body,div,dl,dt,dd,ul,ol,li,th,td {
      margin:0;
      padding:0;
    }
    body {
      background-color: #ccc;
    }
    #counterContainer {
      width:270px;
      height:150px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-75px 0 0 -135px;
      border: 1px solid #ccc;
      background-color: #fff;
    }
    #timeContainer, #toolBarContainer, #msgContainer {
      text-align: center;
    }
    #timeContainer {
      margin-top: 38px;
    }
    #toolBarContainer {
      margin-top: 15px;
    }
    .timeBox {
      width: 30px;
    }
    #minute, #second {
      text-align: center;
    }
    .highLight {
      font-weight: bold;
      color: green;
    }
    .bt {
      width: 84px;
    }
    #msg {
      visibility:hidden;
      padding-top: 10px;
    }
  


  
    
      还有
      分 
      秒 
      下班！