Heim
Web-Frontend
js-Tutorial
Digitaluhr-Effekt mit Countdown für Webseiten, implementiert durch JS_Javascript-Kenntnisse



Digitaluhr-Effekt mit Countdown für Webseiten, implementiert durch JS_Javascript-Kenntnisse
js
倒计时
效果
数字时钟
网页
Das Beispiel in diesem Artikel beschreibt den von JS implementierten Webseiten-Countdown-Digitaluhreffekt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
Code kopieren Der Code lautet wie folgt:
body,div{margin:0;padding:0;}
body{color:#fff;font: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) keine Wiederholung;}
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;}
<script><br> window.onload = function ()<br> {<br> var oCountDown = document.getElementById("countdown");<br> var aInput = oCountDown.getElementsByTagName("input")[0];<br> var timer = null;<br> aInput.onclick = function ()<br> {<br> this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));<br> this.className = this.className == '' ? "cancel" : '';<br> };<br> Funktionsformat(a)<br> {<br> gib a.toString().replace(/^(d)$/,'0$1')<br> zurück }<br> Funktion updateTime ()<br> {<br> var aSpan = oCountDown.getElementsByTagName("span");<br> var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 parseInt(aSpan[1].innerHTML.replace(/^0/,''));<br> if(oRemain <= 0)<br /> {<br /> clearInterval(timer);<br /> zurück<br /> }<br /> oRemain--;<br /> aSpan[0].innerHTML = format(parseInt(oRemain / 60));<br /> oRemain %= 60;<br /> aSpan[1].innerHTML = format(parseInt(oRemain));<br /> }<br /> }<br /> </script>
01Minuten40Sekunden