首頁 web前端 js教程 JS實作的網頁倒數數字時鐘效果_javascript技巧

JS實作的網頁倒數數字時鐘效果_javascript技巧

May 16, 2016 pm 04:11 PM
js 倒數計時 效果 數字時鐘 網頁

本文實例講述了JS實現的網頁倒數數字時鐘效果。分享給大家供大家參考。具體實作方法如下:

複製代碼 代碼如下:




javascript實現的倒數時鐘

<script><br /> window.onload = function ()<br /> {<br /> var oCountDown = document.getElementById("countdown");<br /> var aInput = oCountDown.getElementsByTagName("input")[0];<br /> var timer = null;<br /> aInput.onclick = function ()<br /> {<br /> this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));<br /> this.className = this.className == '' ? "cancel" : '';<br /> };<br /> function format(a)<br /> {<br /> return a.toString().replace(/^(d)$/,'0$1')<br /> }<br /> function updateTime ()<br /> {<br /> var aSpan = oCountDown.getElementsByTagName("span");<br /> var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 parseInt(aSpan[1].innerHTML.replace(/^0/,''));<br /> if(oRemain <= 0)<br /> {<br /> clearInterval(timer);<br /> return<br /> }<br /> oRemain--;<br /> aSpan[0].innerHTML = format(parseInt(oRemain / 60));<br /> oRemain %= 60;<br /> aSpan[1].innerHTML = format(parseInt(oRemain));<br /> }<br /> }<br /> </script>



01分鐘40

腳本之家 www.jb51.net 程式碼特效

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

用戶遭遇罕見故障 三星 Watch 智慧手錶突現白螢幕問題 用戶遭遇罕見故障 三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

用戶遭遇罕見故障 三星 Watch 智慧手錶突現白螢幕問題

Edge瀏覽器怎麼將網頁用捷徑傳送到桌面? Edge瀏覽器怎麼將網頁用捷徑傳送到桌面? Mar 14, 2024 pm 05:22 PM

Edge瀏覽器怎麼將網頁用捷徑傳送到桌面?

網路連線正常但瀏覽器無法存取網頁可能原因 網路連線正常但瀏覽器無法存取網頁可能原因 Feb 19, 2024 pm 03:45 PM

網路連線正常但瀏覽器無法存取網頁可能原因

九州風神阿薩辛 4S 散熱器評測 風冷「刺客大師」範兒 九州風神阿薩辛 4S 散熱器評測 風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

九州風神阿薩辛 4S 散熱器評測 風冷「刺客大師」範兒

網頁圖片載入不出來怎麼辦? 6種解決辦法 網頁圖片載入不出來怎麼辦? 6種解決辦法 Mar 15, 2024 am 10:30 AM

網頁圖片載入不出來怎麼辦? 6種解決辦法

網頁打不開怎麼解決 網頁打不開怎麼解決 Feb 21, 2024 am 10:24 AM

網頁打不開怎麼解決

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

php怎麼在網頁打開 php怎麼在網頁打開 Mar 22, 2024 pm 03:20 PM

php怎麼在網頁打開

See all articles