JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
本文實(shí)例講述了JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下:
一、基本目標(biāo)
在JavaScript設(shè)計(jì)一個(gè)分秒倒計(jì)時(shí)器,一旦時(shí)間完成使按鈕變成不可點(diǎn)擊狀態(tài)
具體效果如下圖,為了說明問題,調(diào)成每50毫秒也就是每0.05跳一次表,
真正使用的時(shí)候,把window.onload=function(){...}中的setInterval("clock.move()",50);從50調(diào)成1000即可。
在時(shí)間用完之前,按鈕還是可以點(diǎn)擊的。
時(shí)間用完之后,按鈕就不能點(diǎn)擊了。
二、制作過程
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>time remaining</title>
</head>
<!--html部分很簡(jiǎn)單,需要被javascript控制的行內(nèi)文本與提交按鈕都被編上ID-->
<body>
剩余時(shí)間:<span id="timer"></span>
<input id="go" type="submit" value="go" />
</body>
</html>
<script>
/*主函數(shù)要使用的函數(shù),進(jìn)行聲明*/
var clock=new clock();
/*指向計(jì)時(shí)器的指針*/
var timer;
window.onload=function(){
/*主函數(shù)就在每50秒調(diào)用1次clock函數(shù)中的move方法即可*/
timer=setInterval("clock.move()",50);
}
function clock(){
/*s是clock()中的變量,非var那種全局變量,代表剩余秒數(shù)*/
this.s=140;
this.move=function(){
/*輸出前先調(diào)用exchange函數(shù)進(jìn)行秒到分秒的轉(zhuǎn)換,因?yàn)閑xchange并非在主函數(shù)window.onload使用,因此不需要進(jìn)行聲明*/
document.getElementById("timer").innerHTML=exchange(this.s);
/*每被調(diào)用一次,剩余秒數(shù)就自減*/
this.s=this.s-1;
/*如果時(shí)間耗盡,那么,彈窗,使按鈕不可用,停止不停調(diào)用clock函數(shù)中的move()*/
if(this.s<0){
alert("時(shí)間到");
document.getElementById("go").disabled=true;
clearTimeout(timer);
}
}
}
function exchange(time){
/*javascript的除法是浮點(diǎn)除法,必須使用Math.floor取其整數(shù)部分*/
this.m=Math.floor(time/60);
/*存在取余運(yùn)算*/
this.s=(time%60);
this.text=this.m+"分"+this.s+"秒";
/*傳過來的形式參數(shù)time不要使用this,而其余在本函數(shù)使用的變量則必須使用this*/
return this.text;
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)倒計(jì)時(shí)器自定義時(shí)間和暫停
- JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能示例
- VB倒計(jì)時(shí)器和JS當(dāng)前時(shí)間
- JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例詳解
- js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
- js 倒計(jì)時(shí)(高效率服務(wù)器時(shí)間同步)
- js實(shí)現(xiàn)瀏覽器倒計(jì)時(shí)跳轉(zhuǎn)頁面效果
- javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
- JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁倒計(jì)時(shí)器
相關(guān)文章
微信小程序?qū)崿F(xiàn)通過雙向滑動(dòng)縮放圖片大小的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過雙向滑動(dòng)縮放圖片大小的方法,結(jié)合實(shí)例形式分析了微信小程序事件響應(yīng)及圖片元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12IE6-IE9不支持table.innerHTML的解決方法分享
讓ie6-ie9支持table.innerHTML,其實(shí)這里只是對(duì)table做了處理,對(duì)其他不支持的元素可以用類似的方案2012-09-09JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實(shí)例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于 Promise 的異步行為,而無需刻意地鏈?zhǔn)秸{(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【凹多邊形的分離軸檢測(cè)算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)凹多邊形的分離軸檢測(cè)算法相關(guān)概念、原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12Three.js實(shí)現(xiàn)簡(jiǎn)單3D房間布局
這篇文章主要為大家詳細(xì)介紹了Three.js實(shí)現(xiàn)簡(jiǎn)單3D房間布局的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12該如何加載google-analytics(或其他第三方)的JS
很多網(wǎng)站為了獲取用戶訪問網(wǎng)站的統(tǒng)計(jì)信息,使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡(jiǎn)稱ga)。2010-05-05