本文實(shí)例講述了javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法。分享給大家供大家參考。具體如下：
周末了，搞個(gè)下班倒計(jì)時(shí)，娛樂(lè)下。
確保下面三點(diǎn)：
1、非IE瀏覽器，較高Chrome版本，已開(kāi)啟HTML5桌面通知。具體設(shè)置見(jiàn)下面截圖
2、將這個(gè)HTML放到本地Web服務(wù)器上測(cè)試，直接雙擊運(yùn)行無(wú)法彈出桌面通知
順帶提下，這個(gè)程序很容易擴(kuò)展成定時(shí)通知。
做這個(gè)東西的過(guò)程有兩點(diǎn)比較糾結(jié)，總結(jié)下：
1、parseInt("09")返回的是0。正確做法是parseInt("09", 10)，顯式指定基數(shù)為十進(jìn)制
2、false與"false"，這個(gè)也有點(diǎn)小糾結(jié)，開(kāi)始我這樣
$("#minute").attr("readonly", "false");
但達(dá)不到效果，因?yàn)閷?shí)際上readonly屬性只有兩個(gè)值true或false，所以如果我設(shè)置它的值為"false"，那么相當(dāng)于設(shè)置（非空字符串轉(zhuǎn)成布爾類型為true）:
$("#minute").attr("readonly", true);
更新：
修復(fù)了一些小Bug，體會(huì)到這句話”看起來(lái)很簡(jiǎn)單的東西也不是那么容易“。
運(yùn)行效果如下圖所示：
<!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>下班倒計(jì)時(shí)</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="設(shè)定" /> <input type="button" id="startBt" class="bt" value="開(kāi)始倒計(jì)時(shí)!" /> </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; // 倒計(jì)時(shí)用的time interval var isCounting = false; // 是否正在倒計(jì)時(shí) var hasSetted = false; // 是否已設(shè)定完畢 var charLimit = 2; // 分和秒都只能為2位 // 桌面通知 function sendDesktopNotification(title, msg) { if(!window.webkitNotifications || (window.webkitNotifications.checkPermission()!=0)) { // 不支持桌面通知或未授權(quán) alert("不好意思，你的瀏覽器不支持桌面通知或者你未開(kāi)啟！"); return; // 不支持桌面通知 } var notificationMsgBox = window.webkitNotifications.createNotification(icon="images/favicon.ico", title, msg); notificationMsgBox.show(); } $(function() { // 將兩位字符串轉(zhuǎn)成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]); } } } // 限制分輸入框和秒輸入框都只能輸入兩個(gè)字符且范圍為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() === "設(shè)定") { if(parseInt($("#minute").val(), 10) == 0 && parseInt($("#second").val(), 10) == 0) { alert("請(qǐng)?jiān)O(shè)定分、秒為0到59范圍內(nèi)的數(shù)字！"); return; } hasSetted = true; // 設(shè)置分輸入框和秒輸入框不可編輯 $("#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 { // 點(diǎn)擊了重置按鈕 clearInterval(myInterval); isCounting = false; hasSetted = false; $("#msg").css("visibility", "hidden"); // 設(shè)置分輸入框和秒輸入框可編輯 $("#minute").attr("readonly", false); $("#second").attr("readonly", false); $("#minute").val("00"); $("#second").val("00"); // 按鈕文字切換 $(this).val("設(shè)定"); } }); $("#startBt").click(function() { if(!hasSetted) { alert("請(qǐng)先設(shè)定時(shí)間！") 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) { // 下班時(shí)間到了 clearInterval(myInterval); $("#msg").css("visibility", "visible"); sendDesktopNotification("下班了", "親，下班了！/nHappy Weekend!"); } }, 1000); // 每一秒鐘更新一下時(shí)間 } isCounting = true; }); }); </script></body></html>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
