この記事では、JSが実装したWebページカウントダウンのデジタル時計効果について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JavaScriptによって実装されたCountDown Clock </title>
<style>
ボディ、div {マージン:0;パディング:0;}
body {color:#ffff; 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; pointer; margin-top:20px; background:url(// www.vevb.com/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>
<スクリプト>
window.onload = function()
{
var ocountdown = document.getElementById( "CountDown");
var ainput = ocountdown.getElementsByTagname( "input")[0];
varタイマー= null;
ainput.onclick = function()
{
this.classname == ""? (Timer = setInterval(updateTime、1000)、updateTime()):( clearinterval(タイマー));
this.classname = this.classname == ''? "キャンセル" : '';
};
関数形式(a)
{
a.tostring()。置換(/^(/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(タイマー);
戻る
}
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> min <span> 40 </span>秒
<入力型= "button" value = "" />
</div> wulin.com www.vevb.comコード特殊効果
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。