Heim > Artikel > Web-Frontend > Einführung in die Prinzipien und Beispiele des Countdowns in Javascript (Code)
Einführung in die Prinzipien und Beispiele des Countdowns in Javascript (Code)
- 不言Original
- 2018-09-01 10:51:401980Durchsuche
Dieser Artikel bietet Ihnen eine Einführung in die Prinzipien und Beispiele des Countdowns in JavaScript. Ich hoffe, dass er für Freunde in Not hilfreich ist.
Countdown-Prinzip: zukünftiger Zeitpunkt - gegenwärtiger Zeitpunkt // aktueller Zeitpunkt (ändert sich) var iNow = new Date();
// zukünftiger Zeitpunkt (unverändert)
//下面两种方法都可以定义未来的时间点 // var iNew = new Date( 2013, 10, 27, 21,56,0 ); var iNew = new Date( 'November 27,2013 22:3:0' ); // 数字形式：new Date( 2013,4,1,9,48,12 ); // 字符串形式：new Date('June 10,2013 12:12:12'); // January、February、March、April、May、June、 // July、August、September、October、November、December
var t = Math.floor((iNew - iNow)/1000); Teilen Sie durch 1000, um Millisekunden in Sekunden umzuwandeln, runden Sie
// Tage ab:Math.floor(t/86400) Wie viele Tage beträgt der Unterschied zwischen der zukünftigen Zeit und der Gegenwart
// Stunden: Math.floor(t%86400/3600) Wie viele Stunden beträgt der Unterschied zwischen der zukünftigen Zeit und der Gegenwart
// Minuten: Math.floor (t%86400%3600/60) Wie viele Minuten beträgt die Differenz zwischen der zukünftigen Zeit und der Gegenwart
// Sekunden: t%60 Wie viele Sekunden beträgt die Differenz zwischen der zukünftigen Zeit und der Gegenwart
Countdown-Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.t1 { width:400px; }
</style>
<script>
/*
var t = Math.floor( new Date().getTime()/1000 );
alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' );
*/
window.onload = function () {
var aInp = document.getElementsByTagName('input');
var iNow = null;
var iNew = null;
var t = 0;
var str = '';
var timer = null;
aInp[2].onclick = function () {
iNew = new Date(aInp[0].value);
clearInterval( timer );
timer = setInterval (function (){
iNow = new Date();
t = Math.floor( ( iNew - iNow ) / 1000 );
if ( t >= 0 ) {
str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
aInp[1].value = str;
} else {
clearInterval( timer );
}
}, 1000);
};
};
</script>
</head>
<body>
距离：<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />
还剩：<input class="t1" type="text" />
<input type="button" value="开始倒计时吧" />
</body>
</html>Verwandte Empfehlungen:
JS-Implementierung von Countdown-Effekt-Beispielen (2 Beispiele)_Javascript-Kenntnisse
JS-Implementierung von Countdown-Button-Beispielen_Javascript-Kenntnisse
Das obige ist der detaillierte Inhalt vonEinführung in die Prinzipien und Beispiele des Countdowns in Javascript (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!