JavaScript 秒錶效果
分享一段程式碼,它利用JavaScript實現秒錶效果,也就是每隔一秒數字加1。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>javascript實現的秒錶效果-螞蟻部落</title> <style type="text/css"> #container{ margin:0 auto; margin-top:10%; width:200px; } #timer{ border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color:green; } input{ width:87px; } </style> <script type="text/javascript"> window.onload=function(){ var ctrl=document.getElementById("ctrl"); var myreset=document.getElementById("myreset"); var timer=document.getElementById("timer"); init(timer,ctrl); myreset.setAttribute("onclick", "init(timer,ctrl)"); } var hour, minute, second; var t; var init=function(theTimer,TheCtrl){ theTimer.innerHTML="00:00:00"; hour=minute=second=0; TheCtrl.setAttribute("value", "開始"); TheCtrl.setAttribute("onclick", "startit()"); clearTimeout(t); } function startit(){ second++; if(second>=60){ second = 0; minute++; } if(minute>=60){ minute = 0; hour++; } timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second); ctrl.setAttribute("value", "暫停/停止"); ctrl.setAttribute("onclick", "pause()"); t=setTimeout("startit()", 1000); } var j = function(arg){ return arg>=10 ? arg : "0" + arg; } var pause = function(){ clearTimeout(t); ctrl.setAttribute("onclick", "startit()"); ctrl.setAttribute("value", "繼續"); } </script> </head> <body> <div id="container"> <div id="timer"></div> <input type="button" id="ctrl" /> <input type="reset" id="myreset"/> </div> </body> </html>
程式碼實現了秒錶效果,下面就介紹一下此特效的實現過程:
一.實現原理:
原理比較簡單,使用setTimeout()函式不斷遞迴呼叫startith函式,startith函式每執行一次增加一秒,然後判斷秒、分是否大於60,如果大於,則按照時間運演算法則進行進位或者清零,再將當前時間值寫入timer元素中,於是就實現了秒錶效果,關於開始,暫停就不多介紹了,可以看程式碼註釋。
二.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var ctrl=document.getElementById("ctrl"),獲取id屬性值為ctrl的物件元素。
(3).var myreset=document.getElementById("myreset"),獲取id屬性值為myreset的物件元素。
(4).var timer=document.getElementById("timer"),獲取id屬性值為timer的物件元素。
(5).init(timer,ctrl),呼叫函式並傳遞引數執行。
(6).myreset.setAttribute("onclick", "init(timer,ctrl)"),為重置按鈕註冊事件處理函式。
(7).var hour, minute, second,宣告三個變數,分別用來表示時間的小時、分鐘和秒。
(8).var t,宣告一個變數用來儲存setTimeout()函式的返回值。
(9).var init=function(theTimer,TheCtrl){},宣告一個函式用來初始化秒錶效果,第一個引數是顯示秒錶效果的元素物件,第二個引數是開始按鈕物件。
(10).theTimer.innerHTML="00:00:00",將theTimer元素的內容設定為="00:00:00"。
(11).hour=minute=second=0,將三個變數的值分別設定為0。
(12).TheCtrl.setAttribute("value", "開始"),將開始按鈕的value屬性值設定為“開始”。
(13).TheCtrl.setAttribute("onclick", "startit()"),為開始按鈕註冊onclick事件處理函式。
(14).clearTimeout(t),停止setTimeout()函式的執行。
(15).function startit(){},宣告一個函式。
(16).second++,秒加1.
(17).if(second>=60),如果秒數大於等於60,則將second清零,並將minute加1。
(18).timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second),將timer的內容設定為當前的秒錶值。
(19).ctrl.setAttribute("value", "暫停/停止"),將開始按鈕的value屬性值設定為暫停/停止"。
(20).ctrl.setAttribute("onclick", "pause()"),為開始按鈕註冊onclick事件處理函式。
(21).t=setTimeout("startit()",1000),一秒後,再次呼叫startit()函式。
(22).var j=function(arg){return arg>=10 ? arg : "0" + arg;},用於判斷當前時間各單位的數值是否大於等於10,如果大於在使用原數值,如果不小於10,則在前面新增0,這是使用了三元運算子。
(23).var pause = function(){},宣告一個函式用於暫停秒錶。
(24).clearTimeout(t),停止setTimeout()函式的執行。
(25).ctrl.setAttribute("onclick", "startit()"),為開始按鈕註冊onclick事件處理函式。
(26).ctrl.setAttribute("value", "繼續"),將開始按鈕的value屬性值設定為“繼續”。
三.相關閱讀:
(1).setAttribute()參閱setAttribute()用法一章節。
(2).setTimeout()參閱setTimeout()方法一章節。
(3).關於三元運算子參閱三元運算子用法一章節。
相關文章
- JavaScript 秒錶效果詳解JavaScript
- js秒錶效果程式碼例項JS
- JavaScript圓形鐘錶效果JavaScript
- JavaScript動態圓形鐘錶效果詳解JavaScript
- javascript圓形電子鐘錶效果程式碼例項JavaScript
- javascript小時、分鐘和秒倒數計時效果JavaScript
- 【Java】Java計時器(秒錶)Java
- SVG圓形鐘錶效果SVG
- PyQt實現鐘錶效果QT
- Win10系統怎麼開啟秒錶 win10系統秒錶的使用教程Win10
- 如何使用Python 實現秒錶功能?Python
- Boost StateChart實現狀態機----秒錶例程
- js鐘錶效果程式碼例項JS
- JavaScript拖拽效果JavaScript
- Cicret Bracelet投影智慧手錶:秒變鋼鐵俠
- canvas原型鐘錶效果程式碼例項Canvas原型
- JavaScript 動態圓形鐘錶JavaScript
- JavaScript抖動效果JavaScript
- JavaScript元素動畫效果JavaScript動畫
- javascript瀑布流效果JavaScript
- canvas繪製圓盤走動鐘錶效果Canvas
- css3動態圓形鐘錶效果CSSS3
- canvas繪製鐘錶效果程式碼例項Canvas
- JavaScript 省市級聯效果JavaScript
- JavaScript 簡單動畫效果JavaScript動畫
- JavaScript元素抖動效果JavaScript
- JavaScript 動畫效果例項JavaScript動畫
- JavaScript計時器效果JavaScript
- JavaScript淡入淡出效果JavaScript
- JavaScript隔行變色效果JavaScript
- Javascript實現動畫效果JavaScript動畫
- jquery和css實現的圓形鐘錶效果jQueryCSS
- canvas實現的圓形走動鐘錶效果Canvas
- 蘋果手錶獨樹一幟! 安全性秒殺全球品牌蘋果
- javascript圓形鐘錶程式碼例項JavaScript
- javascript對錶格的操作總結1JavaScript
- jQuery和css3實現的電子錶效果jQueryCSSS3
- JavaScript 頁面跳轉效果JavaScript