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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JS实现日期加减的方法
Nov 29 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
react-native android状态栏的实现
Jun 15 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
实例详解vue中的$root和$parent
Apr 29 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魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
JS location几个方法小姐
2008/07/09 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
js实现购物车功能
2018/06/12 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
vue中使用echarts的示例
2021/01/03 Vue.js
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python中的多重装饰器
2015/04/11 Python
详谈python read readline readlines的区别
2017/09/22 Python
python版简单工厂模式
2017/10/16 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
师德演讲稿范文
2014/05/06 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
安全教育片观后感
2015/06/17 职场文书
退货证明模板
2015/06/23 职场文书