Home > Article > Web Front-end > js+html5 realizes page refreshable countdown effect
js+html5 realizes page refreshable countdown effect
- 不言Original
- 2018-06-05 14:38:201756browse
This article mainly introduces the countdown effect of js html5 to achieve page refresh in detail. It has certain reference value. Interested friends can refer to it.
Written a 5-minute countdown Code, sometimes the code needs to be refreshed, and then the countdown starts from 4:59 again. One solution I thought of is to use cache, set the start countdown time plus the 5 minutes to countdown as cache, and then use this directly The cache time minus the current time will keep counting down. No matter what you do during the countdown process, the time will always change, haha, that's the principle.
<!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>
Related recommendations:
JavaScript implementation of getting remote html to the current page
The above is the detailed content of js+html5 realizes page refreshable countdown effect. For more information, please follow other related articles on the PHP Chinese website!