javascript - JS倒计时，关于时间计量转化的问题
本文介绍了javascript - JS倒计时，关于时间计量转化的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name=renderer content=webkit>
<!-- some meta tags, important for SEO"-->
<meta name="description" content="put a short description in here" />
<meta name="keywords" content="put your important keywords in here" />
<title>倒计时时钟</title>
<style type="text/css">
.container {
width: 400px;
height: 100px;
line-height: 50px;
background: #000;
color: #fff;
margin: 0 auto;
padding: 30px 10px;
text-align: center;
}
span {
border: 3px solid #ccc;
width: 50px;
padding: 5px;
height: 30px;
background: #fff;
color: #000;
}
button {
display: block;
margin: 20px auto;
}
.on {
background: red;
}
.off {
background: green;
}
</style>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span');
var min = parseInt(span[0].innerHTML);
var second = parseInt(span[1].innerHTML);
var timer = null;
btn.onclick = function() {
if (this.className == 'off') {
this.className = 'on';
btn.innerHTML = '取消';
} else {
this.className = 'off';
btn.innerHTML = '启动';
clearInterval(timer);
}
countdown();
timer = setInterval(countdown, 1000);
}
function countdown() { //时间更新
if (min > 0) {
if (second > 0) {
second--;
console.log('second:' + second);
span[1].innerHTML = second;
} else if (second == 0) {
min--;
console.log('min:' + min);
span[0].innerHTML = min;
span[1].innerHTML = 59;
}
} else if (min == 0) {
if (second > 0) {
second--;
console.log('second:' + second);
span[1].innerHTML = second;
} else if (second == 0) {
clearInterval(timer);
}
}
}
};
</script>
</head>
<body>
<div class="container">
<span>01</span> 分种
<span>5</span> 秒
<button type="button" class="off">启动</button>
</div>
</body>
</html>这个是一个倒计时时钟，走到0分59秒的时候就不再倒计时了，这是为什么呢？
解决方案
因为你当第一次秒数为0时候，分钟数--，改变了html中的分钟和秒数，但是没有对second赋值，导致其仍为0。
function countdown() { //时间更新
if (min > 0) {
if (second > 0) {
second--;
console.log('second:' + second);
span[1].innerHTML = second;
} else if (second == 0) {
min--;
console.log('min:' + min);
span[0].innerHTML = min;
span[1].innerHTML = 59;
second = 59; // 此处遗漏
}
} else if (min == 0) {
if (second > 0) {
second--;
console.log('second:' + second);
span[1].innerHTML = second;
} else if (second == 0) {
clearInterval(timer);
}
}
}补充：
取消
btn.onclick = function() {
if (this.className == 'off') {
this.className = 'on';
btn.innerHTML = '取消';
// 这里应在判断内进行countdown与setInterval
countdown();
timer = setInterval(countdown, 1000);
} else {
this.className = 'off';
btn.innerHTML = '启动';
clearInterval(timer);
}
}这篇关于javascript - JS倒计时，关于时间计量转化的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
