javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法(可桌面通知)
更新時(shí)間：2015年07月10日 17:49:24 作者：優(yōu)雅先生
這篇文章主要介紹了javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法,涉及javascript倒計(jì)時(shí)效果及桌面提示效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值
本文實(shí)例講述了javascript實(shí)現(xiàn)下班倒計(jì)時(shí)效果的方法。分享給大家供大家參考。具體如下：
周末了，搞個(gè)下班倒計(jì)時(shí)，娛樂下。
確保下面三點(diǎn)：
1、非IE瀏覽器，較高Chrome版本，已開啟HTML5桌面通知。具體設(shè)置見下面截圖
2、將這個(gè)HTML放到本地Web服務(wù)器上測試，直接雙擊運(yùn)行無法彈出桌面通知
順帶提下，這個(gè)程序很容易擴(kuò)展成定時(shí)通知。
做這個(gè)東西的過程有兩點(diǎn)比較糾結(jié)，總結(jié)下：
1、parseInt("09")返回的是0。正確做法是parseInt("09", 10)，顯式指定基數(shù)為十進(jìn)制
2、false與"false"，這個(gè)也有點(diǎn)小糾結(jié)，開始我這樣
$("#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ì)到這句話”看起來很簡單的東西也不是那么容易“。
運(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="開始倒計(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("不好意思，你的瀏覽器不支持桌面通知或者你未開啟！");
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ì)有所幫助。
相關(guān)文章
SwfUpload在IE10上不出現(xiàn)上傳按鈕的解決方法
在測試中發(fā)現(xiàn)使用了SwfUpload實(shí)現(xiàn)的無刷新上傳功能，在IE10上竟然無法使用了，難道SwfUpload不支持嗎？下面與大家分享下通過修改SwfUplad.JS文件讓其支持ie102013-06-06
這篇文章主要介紹了微信js-sdk地理位置接口用法,結(jié)合實(shí)例形式分析了js-sdk地理位置接口的定義與簡單使用方法,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片上下切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
還是掛馬問題，這段時(shí)間，我漸漸感到壓力，頭大，通過QQ或MSN加我的人越來越多，我最近自己的工作本來就忙得不亦樂乎。哎，想想，還是要抽空來來幫幫大家。2008-03-03
JavaScript前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請(qǐng)求的并發(fā)數(shù),即限制同一時(shí)間內(nèi)進(jìn)行處理的請(qǐng)求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對(duì)大家有所幫助2023-12-12
解決Layui數(shù)據(jù)表格中checkbox位置不居中的方法
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格中checkbox位置不居中的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
用javascript獲取textarea中的光標(biāo)位置
Javascript一向以他的靈活隨意而著稱，這也使得它的功能可以非常的強(qiáng)大，而由于沒有比較好的調(diào)試工具，又使得它使用起來困難重重，尤其使對(duì)于一些初學(xué)者，更是感覺到無從下手。今天探討的問題是用javascript獲取textarea中光標(biāo)的位置。2008-05-05
這篇文章主要為大家詳細(xì)介紹了超簡單的微信小程序輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案
這篇文章主要給大家介紹了關(guān)于uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
javascript利用控件對(duì)windows的操作實(shí)現(xiàn)原理與應(yīng)用
假如要發(fā)送漢字的聊天框的內(nèi)容的話，我們也要從windows消息機(jī)制下手，先找到聊天消息的句柄（可以利用findwindow函數(shù)或者用spy工具哈），然后在找到上面的聊天框的句柄，接著我們就可以想這個(gè)句柄發(fā)送WM_SETTEXT的消息了2012-12-12