这篇文章主要介绍了javascript实现下班倒计时效果的方法,涉及javascript倒计时效果及桌面提示效果的实现技巧,具有一定参考借鉴价值
本文实例讲述了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; } 还有 分 秒 下班！ 可以下班了，哦耶~~
希望本文所述对大家的javascript程序设计有所帮助。
以上就是javascript实现下班倒计时效果的方法(可桌面通知)的详细内容，更多请关注本站其它相关文章！
