Maison > Article > interface Web > js+html5 réalise un effet de compte à rebours actualisable sur la page
js+html5 réalise un effet de compte à rebours actualisable sur la page
- 不言original
- 2018-06-05 14:38:201754parcourir
Cet article présente principalement l'effet de compte à rebours de js+html5 pour actualiser la page en détail. Il a une certaine valeur de référence.
Écrit un compte à rebours de 5 minutes Parfois, le code est nécessaire. pour être actualisé, puis le compte à rebours commence à partir de 4h59. Une solution à laquelle j'ai pensé est d'utiliser le cache, de définir le temps de démarrage du compte à rebours plus les 5 minutes du compte à rebours comme cache, puis d'utiliser directement ce temps de cache moins l'heure actuelle. continuez à compter à rebours. Peu importe ce que vous faites pendant le processus de compte à rebours, l'heure changera toujours, haha, c'est le principe.
<!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>
Recommandations associées :
Implémentation de JavaScript pour obtenir du HTML distant dans la page actuelle
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!