javascript实现下班倒计时效果的方法(可桌面通知)


Posted in Javascript onJuly 10, 2015

本文实例讲述了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,体会到这句话”看起来很简单的东西也不是那么容易“。

运行效果如下图所示:

javascript实现下班倒计时效果的方法(可桌面通知)

javascript实现下班倒计时效果的方法(可桌面通知)

javascript实现下班倒计时效果的方法(可桌面通知)

javascript实现下班倒计时效果的方法(可桌面通知)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="author" content="By jxqlovejava" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>下班倒计时</title>
  <style type="text/css">
    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;
    }
  </style>
</head>
<body>
  <div id="counterContainer">
    <div id="timeContainer">
      还有
      <input type="text" id="minute" class="timeBox" value="00">分 
      <input type="text" id="second" class="timeBox" value="00">秒 
      <span class="highLight">下班!</span>
    </div>
    <div id="toolBarContainer">
      <input type="button" id="setOrResetBt" class="bt" value="设定" />
      <input type="button" id="startBt" class="bt" value="开始倒计时!" />
    </div>
    <div id="msgContainer">
      <span id="msg" class="highLight">可以下班了,哦耶~~</span>
    </div>
  </div>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    var minuteLeft;   // 剩下的分
    var secondLeft;   // 剩下的秒
    var totalSeconds;  // 剩下的总秒数
    var myInterval;   // 倒计时用的time interval
    var isCounting = false; // 是否正在倒计时
    var hasSetted = false; // 是否已设定完毕
    var charLimit = 2; // 分和秒都只能为2位
    // 桌面通知
    function sendDesktopNotification(title, msg) {
      if(!window.webkitNotifications || (window.webkitNotifications.checkPermission()!=0)) { // 不支持桌面通知或未授权
        alert("不好意思,你的浏览器不支持桌面通知或者你未开启!");
        return; // 不支持桌面通知
      }
      var notificationMsgBox = window.webkitNotifications.createNotification(icon="images/favicon.ico", title, msg);
      notificationMsgBox.show();
    }
    $(function() {
      // 将两位字符串转成00-59格式
      function convertToStandardFormat(timeInput) {
        var val = $(timeInput).val();
        if(val.length == 0) {
          return;
        }
        else if(val.length == 1) {
          if(isNaN(val)) {
            $(timeInput).val('0');
          }
        }
        else if(val.length == 2 || val.length == 3) {
          var intVal = parseInt(val, 10);
          if(isNaN(intVal) || intVal <= 0) {
            $(timeInput).val('00');
          }
          else {
            var firstDigit = parseInt(val[0]);
            if(firstDigit > 5) {
              firstDigit = 0;
            }
            $(timeInput).val(firstDigit+val[1]);
          }
        }
      }
      // 限制分输入框和秒输入框都只能输入两个字符且范围为00-59
      $("#minute").keyup(function(e) {
        if(e.keyCode == 37 || e.keyCode == 39) // 方向键
          return;
        convertToStandardFormat($(this));
      });
      $("#second").keyup(function(e) {
        if(e.keyCode == 37 || e.keyCode == 39) // 方向键
          return;
        convertToStandardFormat($(this));
      });
      $("#setOrResetBt").click(function() {
        if($(this).val() === "设定") {
          if(parseInt($("#minute").val(), 10) == 0 && parseInt($("#second").val(), 10) == 0) {
            alert("请设定分、秒为0到59范围内的数字!");
            return;
          }
          hasSetted = true;
          // 设置分输入框和秒输入框不可编辑
          $("#minute").attr("readonly", true);
          $("#second").attr("readonly", true);
          minuteLeft = parseInt($("#minute").val(), 10);
          secondLeft = parseInt($("#second").val(), 10);
          totalSeconds = minuteLeft*60 + secondLeft;
          // 按钮文字切换
          $(this).val("重置");
        }
        else { // 点击了重置按钮
          clearInterval(myInterval);
          isCounting = false;
          hasSetted = false;
          $("#msg").css("visibility", "hidden");
          // 设置分输入框和秒输入框可编辑
          $("#minute").attr("readonly", false);
          $("#second").attr("readonly", false);
          $("#minute").val("00");
          $("#second").val("00");
          // 按钮文字切换
          $(this).val("设定");
        }
      }); 
      $("#startBt").click(function() {
        if(!hasSetted) {
          alert("请先设定时间!")
          return;
        }
        if(!isCounting) {
          myInterval = setInterval(function() {
            totalSeconds--;
            if(secondLeft == 0 && minuteLeft > 0) {
              minuteLeft--;
              secondLeft = 59;
            }
            else {
              secondLeft--;
            }
            // 更新分秒显示
            $("#minute").val(minuteLeft > 9 ? minuteLeft : ('0'+minuteLeft));
            $("#second").val(secondLeft > 9 ? secondLeft : ('0'+secondLeft));
            if(totalSeconds==0) {  // 下班时间到了
              clearInterval(myInterval);
              $("#msg").css("visibility", "visible");
              sendDesktopNotification("下班了", "亲,下班了!\nHappy Weekend!");
            }
          }, 1000); // 每一秒钟更新一下时间
        }
        isCounting = true;
      });
    });
  </script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
react MPA 多页配置详解
Oct 18 Javascript
vue实现分页加载效果
Dec 24 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 #Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 #Javascript
JavaScript模板引擎用法实例
Jul 10 #Javascript
JavaScript实现打字效果的方法
Jul 10 #Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 #Javascript
再谈JavaScript线程
Jul 10 #Javascript
javascript实现判断鼠标的状态
Jul 10 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python基本语法经典教程
2016/03/11 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python常用特殊方法实例总结
2019/03/22 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
怎样声明接口
2014/09/19 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
学习决心书
2014/03/11 职场文书
2014年人事部工作总结
2014/12/03 职场文书
暑期家教宣传单
2015/07/14 职场文书