Heim > Web-Frontend > js-Tutorial > JS implementiert Countdown (Tage, Stunden, Minuten, Sekunden)

JS implementiert Countdown (Tage, Stunden, Minuten, Sekunden)

高洛峰
Freigeben: 2016-12-06 15:42:09
Original
2323 Leute haben es durchsucht

Das Beispiel in diesem Artikel analysiert den detaillierten Prozess der Countdown-Implementierung in JS als Referenz. Der spezifische Inhalt ist wie folgt

Hinweis:
Die Funktion parseInt() kann eine Zeichenfolge analysieren und eine zurückgeben ganze Zahl.
Syntax:
parseInt(string, radix)

Beispiel:

parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8
Nach dem Login kopieren

Implementieren des Countdown-Codes

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>JS实现倒计时(天数,时,分,秒)</title>
  
</head>
<body onload="leftTimer()">
  
<h2>剩余时间:</h2>
<div id="timer"></div>
</body>
</html>
Nach dem Login kopieren

Javascript-Code:

<script language="javascript" type="text/javascript">
function leftTimer(year,month,day,hour,minute,second){
 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
 days = checkTime(days);
 hours = checkTime(hours);
 minutes = checkTime(minutes);
 seconds = checkTime(seconds);
 setInterval("leftTimer(2016,11,11,11,11,11)",1000);
 document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
function checkTime(i){ //将0-9的数字前面加上0,例1变为01
 if(i<10)
 {
  i = "0" + i;
 }
 return i;
}
  
</script>
Nach dem Login kopieren

Erkenntniseffekt:

JS implementiert Countdown (Tage, Stunden, Minuten, Sekunden)

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage