JS_javascript スキルによって実装された Web ページのカウントダウン デジタル時計効果

この記事の例では、JS によって実装された Web ページのカウントダウン デジタル時計効果について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>


<スタイル>
body,div{マージン:0;パディング:0;}
ボディ{カラー:#fff;フォント:16px/1.5 5fae8f6f96c59ed1;}
#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.jb51.net/jscss/demoimg/201210/btn-1.png)繰り返しはありません;}
input.cancel{背景位置:0 -50px;}
スパン{カラー:#000;幅:80px;行の高さ:2;背景:#fbfbfb;ボーダー:2px ソリッド #b4b4b4;マージン:0 10px;パディング:0 10px;}

<スクリプト>
window.onload = function ()
{
var oCountDown = document.getElementById("カウントダウン");
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 == '' ? "キャンセル" : '';
};
関数形式(a)
{
return a.toString().replace(/^(d)$/,'0$1')
}
関数 updateTime()
{
var aSpan = oCountDown.getElementsByTagName("スパン");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain {
clearInterval(タイマー);
戻る
}
o残り--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
o残り %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}

01分40秒

スクリプト ホーム www.jb51.net コード効果

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。