この記事では、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プログラミングに役立つことを願っています。