js+html5는 페이지 새로 고침이 가능한 카운트다운 효과를 실현합니다.
- 不言원래의
- 2018-06-05 14:38:201703검색
이 글은 주로 js+html5를 이용한 페이지 새로고침 카운트다운 효과를 자세하게 소개하고 있습니다. 관심 있는 친구들은 참고하시면 됩니다.
때때로 코드를 새로고침해야 할 때도 있습니다. 그런 다음 4시 59분에 카운트다운이 다시 시작됩니다. 제가 생각한 한 가지 해결책은 캐시를 사용하고 시작 카운트다운 시간에 5분을 더해 캐시로 카운트다운하도록 설정한 다음 이 캐시 시간을 직접 사용하여 현재 시간을 빼는 것입니다. 카운트다운 과정에서 무엇을 하든 시간은 항상 변합니다. 하하, 그게 원칙입니다.
<!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>
관련 권장 사항:
원격 HTML을 현재 페이지로 가져오는 JavaScript
위 내용은 js+html5는 페이지 새로 고침이 가능한 카운트다운 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.