JS實(shí)現(xiàn)的網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果
更新時(shí)間：2015年03月02日 15:02:18 作者：站長(zhǎng)學(xué)院
這篇文章主要介紹了JS實(shí)現(xiàn)的網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果,是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript實(shí)現(xiàn)的倒計(jì)時(shí)時(shí)鐘</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(http://www.fzitv.net/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
};
function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1')
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown">
<span>01</span>分鐘<span>40</span>秒
<input type="button" value="" />
</div>腳本之家 www.fzitv.net 代碼特效
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript實(shí)現(xiàn)的倒計(jì)時(shí)時(shí)鐘</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(http://www.fzitv.net/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
};
function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1')
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown">
<span>01</span>分鐘<span>40</span>秒
<input type="button" value="" />
</div>腳本之家 www.fzitv.net 代碼特效
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS事件循環(huán)-微任務(wù)-宏任務(wù)（原理講解+面試題分析）
這篇文章主要介紹了JS事件循環(huán)-微任務(wù)-宏任務(wù)的原理，本文章含有面試題分析，不管是面試者還是想要學(xué)習(xí)相關(guān)內(nèi)容的都可以很好的理解、掌握這部分內(nèi)容,需要的朋友可以參考下2023-01-01
javascript中tostring()和valueof()的用法及兩者的區(qū)別
基本上，所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法，null除外。它們倆解決javascript值運(yùn)算與顯示的問(wèn)題，本文給大家介紹javascript中tostring()和valueof()的用法及兩者的區(qū)別，對(duì)js tostring valueof相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看2014-10-10
JavaScript中用字面量創(chuàng)建對(duì)象介紹
這篇文章主要介紹了JavaScript中用字面量創(chuàng)建對(duì)象介紹,本文直接給出代碼實(shí)例,并講解了一些技巧,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了如何使用 JavaScript 操作瀏覽器歷史記錄 API，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
最近在研究js，疑惑也比較多。主要是被原型這個(gè)東西給弄迷糊了。2010-11-11
這篇文章主要介紹了js異步編程技巧，使用計(jì)數(shù)器的方式，每完成一個(gè)請(qǐng)求計(jì)數(shù)器加1 當(dāng)計(jì)數(shù)器等于2時(shí)執(zhí)行回調(diào)邏輯,兩個(gè)http并行發(fā)送,從而極大的提高了效率,需要的朋友可以參考下2017-08-08
項(xiàng)目中需要前端書(shū)寫登錄頁(yè)面，用戶輸入賬號(hào)密碼，本文主要介紹了js前端登錄加密解決方案，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
layui點(diǎn)擊彈框頁(yè)面 表單請(qǐng)求的方法
今天小編就為大家分享一篇layui點(diǎn)擊彈框頁(yè)面 表單請(qǐng)求的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09