suchen

Heim >Web-Frontend >js-Tutorial >Javascript implementiert digitale Countdown-Spezialeffekte_Javascript-Fähigkeiten

Javascript implementiert digitale Countdown-Spezialeffekte_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:07:301938Durchsuche

本文实例讲述了JS实现的网页倒计时数字时钟效果，分享给大家供大家参考，具体实现方法如下：

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现的倒计时时钟</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.jb51.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 == "" &#63; (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' &#63; "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>代码特效
</body>
</html>

如果觉得还不过瘾大家可以参考此专题进行深入学习：js倒计时汇总

希望本文所述对大家学习javascript程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Node.js betreibt die MySQL-Datenbank zum Hinzufügen, Löschen, Ändern und Abfragen von_node.jsNächster Artikel：Node.js betreibt die MySQL-Datenbank zum Hinzufügen, Löschen, Ändern und Abfragen von_node.js

In Verbindung stehende Artikel

Mehr sehen