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表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
AngularJS中filter的使用实例详解
Aug 25 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
JavaScript的function函数详细介绍
Nov 20 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
新学期班主任寄语
2014/01/18 职场文书
政府信息公开实施方案
2014/05/09 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
2015年个人思想总结
2015/03/09 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server