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 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
Zerg基本策略
2020/03/14 星际争霸
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
实例讲解PHP表单处理
2019/02/15 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
python中定义结构体的方法
2013/03/04 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python中属性和描述符的正确使用
2016/08/23 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
浅析Django中关于session的使用
2019/12/30 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
电视节目策划方案
2014/05/16 职场文书
匿名信格式范文
2015/05/27 职场文书
白银帝国观后感
2015/06/17 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
mysql中between的边界,范围说明
2021/06/08 MySQL