javascript實現(xiàn)下班倒計時效果的方法(可桌面通知)

更新時間：2015年07月10日 17:49:24 作者：優(yōu)雅先生

這篇文章主要介紹了javascript實現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實現(xiàn)技巧,具有一定參考借鑒價值

本文實例講述了javascript實現(xiàn)下班倒計時效果的方法。分享給大家供大家參考。具體如下：

周末了，搞個下班倒計時，娛樂下。

確保下面三點：

1、非IE瀏覽器，較高Chrome版本，已開啟HTML5桌面通知。具體設置見下面截圖
2、將這個HTML放到本地Web服務器上測試，直接雙擊運行無法彈出桌面通知

順帶提下，這個程序很容易擴展成定時通知。

做這個東西的過程有兩點比較糾結，總結下：

1、parseInt("09")返回的是0。正確做法是parseInt("09", 10)，顯式指定基數(shù)為十進制
2、false與"false"，這個也有點小糾結，開始我這樣
$("#minute").attr("readonly", "false");
但達不到效果，因為實際上readonly屬性只有兩個值true或false，所以如果我設置它的值為"false"，那么相當于設置（非空字符串轉成布爾類型為true）:
$("#minute").attr("readonly", true);

更新：

修復了一些小Bug，體會到這句話”看起來很簡單的東西也不是那么容易“。

運行效果如下圖所示：

<!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">分&nbsp;
      <input type="text" id="second" class="timeBox" value="00">秒&nbsp;
      <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;  // 剩下的總秒數(shù)
    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范圍內(nèi)的數(shù)字！");
            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程序設計有所幫助。

您可能感興趣的文章:

js簡單實現(xiàn)讓文本框內(nèi)容逐個字的顯示出來
逐個字顯示效果就像是打印機一樣，在某些情況下起到強調(diào)作用，下面有個不錯的示例，大家可以學習下
2013-10-10
jquery實現(xiàn)簡單的遮罩層
這篇文章主要介紹了jquery實現(xiàn)簡單的遮罩層相關代碼，內(nèi)容很豐富，教大家實現(xiàn)遮罩層效果，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript設計模式之建造者模式介紹
這篇文章主要介紹了JavaScript設計模式之建造者模式介紹,將一個復雜對象的構造與它的表示相分離,使同樣的創(chuàng)建過程可有不同的表示,這就叫做建造者模式,需要的朋友可以參考下
2014-12-12
JavaScript必知必會(五) eval 的使用
這篇文章主要介紹了JavaScript必知必會(五) eval 的使用的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
基于js?+?html2canvas實現(xiàn)網(wǎng)頁放大鏡功能
最近接到任務,需實現(xiàn)【網(wǎng)頁】放大鏡的效果,百度搜索?【js?放大鏡】關鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實現(xiàn),根本無法滿足我的需求,于是自己花了點時間調(diào)研實現(xiàn),在這里分享給大家,感興趣的朋友可以參考下
2023-12-12
JavaScript中的聲明提升實例詳解
這篇文章主要為大家介紹了JavaScript中的聲明提升實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
微信小程序實現(xiàn)語音識別轉文字功能及遇到的坑
這篇文章主要介紹了小程序實現(xiàn)語音識別轉文字功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
JavaScript創(chuàng)建對象的方式小結(4種方式)
這篇文章主要介紹了JavaScript創(chuàng)建對象的方式,結合實例形式總結分析了四種創(chuàng)建對象的方式,并附帶分析了JavaScript對象復制的技巧,需要的朋友可以參考下
2015-12-12
bootstrap日歷插件datetimepicker使用方法
這篇文章主要為大家詳細介紹了bootstrap日歷datetimepicker插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript 自動分號插入（JavaScript synat:auto semicolon insertion）
今天在看《Extjs中文手冊》的時候，寫了四五行樣例代碼，結果IE和Firefox一直報錯不通過。
2009-11-11