Heim > Artikel > Web-Frontend > js+html5 implementiert einen Countdown-Effekt, der auf der Seite aktualisiert werden kann
js+html5 implementiert einen Countdown-Effekt, der auf der Seite aktualisiert werden kann
- 不言Original
- 2018-06-05 14:38:201703Durchsuche
Dieser Artikel stellt hauptsächlich den Countdown-Effekt von js+html5 vor, um eine Seitenaktualisierung zu erreichen. Er hat einen gewissen Referenzwert.
Einen 5-Minuten-Countdown geschrieben aktualisiert werden, und dann beginnt der Countdown bei 4:59. Eine Lösung, die ich mir überlegt habe, besteht darin, den Cache zu verwenden, die Start-Countdown-Zeit plus die 5 Minuten für den Countdown als Cache festzulegen und dann direkt diese Cache-Zeit abzüglich der aktuellen Zeit zu verwenden Zählen Sie weiter herunter, egal was Sie während des Countdowns tun, die Zeit wird sich immer ändern, haha, das ist das Prinzip.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单易用的倒计时js代码</title>
</head>
<body>
<p id="time"></p>
<script src="js/jquery-git.js"></script>
<script>
localStorage.setItem('start', new Date().getTime());
countDown(localStorage.getItem('start'));
function countDown(startTime) {
var time = setInterval(function() {
var currentTime = new Date();
var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);
if(min < 10) {
min = "0" + min;
}
if(second < 10) {
second = "0" + second;
}
var countDown = min + ":" + second;
$('#time').html(countDown);
if(second == 0 && min == 0) {
clearInterval(time);
}
}, 1000)
}
</script>
</body>
</html>
Verwandte Empfehlungen:
JavaScript-Implementierung, um Remote-HTML auf die aktuelle Seite zu bringen
Das obige ist der detaillierte Inhalt vonjs+html5 implementiert einen Countdown-Effekt, der auf der Seite aktualisiert werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!