html
<input type="text" id="time"> <button id="btn">确定</button> <p id="counter"></p>
javascript
window.onload = function() { var btn = document.getElementById('btn'); btn.onclick = getTime; function getTime() { function count(sec, cur) { var dif = (sec - cur) / 1000; var day = Math.floor(dif/3600/24); var s1 = dif % (3600 * 24); var hour = Math.floor(s1 / 3600); var s2 = s1 % 3600; var minute = Math.floor(s2 / 60); var s3 = s2 % 60; var second = Math.floor(s3); document.getElementById('counter').innerHTML = '距离' + str + ' 00:00:00' + '还有' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒'; } window.clearInterval(intId); var str = document.getElementById('time').value; var cur = Date.parse(new Date()); var sec = Date.parse(str+' 00:00:00'); count(sec, cur); var intId = window.setInterval(function () { sec -= 1000; count(sec, cur); }, 1000); } };
不明白为什么setInterval返回值,在getTime的作用域下,有时为空?!
举个最简单的例子,你就明白了.
function test(){
console.log(a);//相当于你的clearInterval, 值是 undefined
var a = 100;//相当于你的 setInterval
};
test();
test();
test();
test();
具体原因,请参考 JavaScript 秘密花园 - 变量声明提升(Hoisting)
解决办法:
window.onload = function() {
var btn = document.getElementById('btn'), intId;
btn.onclick = getTime;
function getTime() {
function count(sec, cur) {
var dif = (sec - cur) / 1000;
var day = Math.floor(dif/3600/24);
var s1 = dif % (3600 * 24);
var hour = Math.floor(s1 / 3600);
var s2 = s1 % 3600;
var minute = Math.floor(s2 / 60);
var s3 = s2 % 60;
var second = Math.floor(s3);
document.getElementById('counter').innerHTML = '距离' + str + ' 00:00:00' + '还有' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒';
}
window.clearInterval(intId);
var str = document.getElementById('time').value;
var cur = Date.parse(new Date());
var sec = Date.parse(str+' 00:00:00');
count(sec, cur);
intId = window.setInterval(function () {
sec -= 1000;
count(sec, cur);
}, 1000);
}
};