Javascript时钟变负
Javascript Clock goes negative
http://jsfiddle.net/8Ab78/448/
我试图修复它但失败了。
function ShowTime() {
var now = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
var hrs = 17 - now.getHours();
var mins = 30 - now.getMinutes();
var secs = 60 - now.getSeconds();
if (hrs < 0) {
var hrs = 17 - tomorrow.getHours();
var mins = 30 - tomorrow.getMinutes();
var secs = 60 - tomorrow.getSeconds();
}
timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
$("#countdown").html(timeLeft);
}
ShowTime();
var countdown = setInterval(ShowTime, 1000);
<div id="countdown"></div>
您需要在想要停止计时器时调用 clearInterval(countdown);
。根据 clearInterval docs on MDN
The clearInterval() method of the WindowOrWorkerGlobalScope mixin cancels a timed, repeating action which was previously established by a call to setInterval().
此外,我认为您提供的代码需要更改为 tomorrow.setDate(now.getDate() + 1);
而不是 tomorrow.setDate(today.getDate() + 1);
我从之前的笔记中找到了这个,但是我在 SO 中找不到 link 的问题。
<font size=1><p id='demo'></font>
<script src="path/to/jquery.js"></script>
<script>
// Set the date we're counting down to
//var insert1="<?php echo $insert1; ?>";
//var timeout1="<?php echo $timeout1; ?>";
var insert1="05/23/2017 00:00:00";
var timeout1="05/25/2017 00:00:00";
// Update the count down every 1 second
var x = setInterval(function() {
var countDownDate = new Date(timeout1).getTime();
var countDownDates = new Date().getTime();
// Get todays date and time
// Find the distance between now an the count down date
var distance = countDownDate - countDownDates;
//var distance = countDownDates;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Time out";
}
}, 1000);
</script>
您将变量定义为现在并查找今天,因此它不显示倒计时
新的html如下
<div id="countdown"></div>
新的js会像下面这样
function ShowTime() {
var today= new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
var hrs = 17-now.getHours();
var mins = 30-now.getMinutes();
var secs = 60-now.getSeconds();
if(hrs < 0) {
var hrs = 17-tomorrow.getHours();
var mins = 30-tomorrow.getMinutes();
var secs = 60-tomorrow.getSeconds();
}
timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
$("#countdown").html(timeLeft);
}
ShowTime();
var countdown = setInterval(ShowTime ,1000);
你的算法坏了。
每次时钟滴答作响,都会生成一个新的日期。如果是 18:00 则:
var hrs = 17 - now.getHours();
会变成负数,所以你会做:
var hrs = 17 - tomorrow.getHours();
但这会产生-1。您想要做的是为结束时间创建一个日期,然后从中减去当前日期并将结果(毫秒)解析为小时、分钟和秒。
我不知道分秒调整有什么用,它们对我来说没有意义。以下对您的代码进行了细微调整:
function ShowTime() {
var now = new Date();
var end = new Date(+now);
var endHour = 17;
end.setHours(endHour,0,0,0);
// If past end, set to tomorrow
if (now >= end) {
end.setDate(end.getDate() + 1);
}
console.log('Counting down to ' + end.toString());
// Get difference and divide into hr, min, sec
var diff = end - now;
var hrs = diff / 3.6e6 | 0;
var mins = (diff % 3.6e6)/ 6e4 | 0;
var secs = (diff % 6e4) / 1000 | 0;
// Format and write to document
timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
document.getElementById('countdown').innerHTML = timeLeft;
}
ShowTime();
var countdown = setInterval(ShowTime, 1000);
<div id="countdown"></div>
如果你想让倒计时说 17:30,那么引入一个 endMin 变量,例如:
var endHour = 17;
var endMin = 30;
end.setHours(endHour, endMin, 0, 0);
// If past end hour, set to tomorrow
if (now > end) {
http://jsfiddle.net/8Ab78/448/
我试图修复它但失败了。
function ShowTime() {
var now = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
var hrs = 17 - now.getHours();
var mins = 30 - now.getMinutes();
var secs = 60 - now.getSeconds();
if (hrs < 0) {
var hrs = 17 - tomorrow.getHours();
var mins = 30 - tomorrow.getMinutes();
var secs = 60 - tomorrow.getSeconds();
}
timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
$("#countdown").html(timeLeft);
}
ShowTime();
var countdown = setInterval(ShowTime, 1000);
<div id="countdown"></div>
您需要在想要停止计时器时调用 clearInterval(countdown);
。根据 clearInterval docs on MDN
The clearInterval() method of the WindowOrWorkerGlobalScope mixin cancels a timed, repeating action which was previously established by a call to setInterval().
此外,我认为您提供的代码需要更改为 tomorrow.setDate(now.getDate() + 1);
而不是 tomorrow.setDate(today.getDate() + 1);
我从之前的笔记中找到了这个,但是我在 SO 中找不到 link 的问题。
<font size=1><p id='demo'></font>
<script src="path/to/jquery.js"></script>
<script>
// Set the date we're counting down to
//var insert1="<?php echo $insert1; ?>";
//var timeout1="<?php echo $timeout1; ?>";
var insert1="05/23/2017 00:00:00";
var timeout1="05/25/2017 00:00:00";
// Update the count down every 1 second
var x = setInterval(function() {
var countDownDate = new Date(timeout1).getTime();
var countDownDates = new Date().getTime();
// Get todays date and time
// Find the distance between now an the count down date
var distance = countDownDate - countDownDates;
//var distance = countDownDates;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Time out";
}
}, 1000);
</script>
您将变量定义为现在并查找今天,因此它不显示倒计时
新的html如下
<div id="countdown"></div>
新的js会像下面这样
function ShowTime() {
var today= new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
var hrs = 17-now.getHours();
var mins = 30-now.getMinutes();
var secs = 60-now.getSeconds();
if(hrs < 0) {
var hrs = 17-tomorrow.getHours();
var mins = 30-tomorrow.getMinutes();
var secs = 60-tomorrow.getSeconds();
}
timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
$("#countdown").html(timeLeft);
}
ShowTime();
var countdown = setInterval(ShowTime ,1000);
你的算法坏了。
每次时钟滴答作响,都会生成一个新的日期。如果是 18:00 则:
var hrs = 17 - now.getHours();
会变成负数,所以你会做:
var hrs = 17 - tomorrow.getHours();
但这会产生-1。您想要做的是为结束时间创建一个日期,然后从中减去当前日期并将结果(毫秒)解析为小时、分钟和秒。
我不知道分秒调整有什么用,它们对我来说没有意义。以下对您的代码进行了细微调整:
function ShowTime() {
var now = new Date();
var end = new Date(+now);
var endHour = 17;
end.setHours(endHour,0,0,0);
// If past end, set to tomorrow
if (now >= end) {
end.setDate(end.getDate() + 1);
}
console.log('Counting down to ' + end.toString());
// Get difference and divide into hr, min, sec
var diff = end - now;
var hrs = diff / 3.6e6 | 0;
var mins = (diff % 3.6e6)/ 6e4 | 0;
var secs = (diff % 6e4) / 1000 | 0;
// Format and write to document
timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
document.getElementById('countdown').innerHTML = timeLeft;
}
ShowTime();
var countdown = setInterval(ShowTime, 1000);
<div id="countdown"></div>
如果你想让倒计时说 17:30,那么引入一个 endMin 变量,例如:
var endHour = 17;
var endMin = 30;
end.setHours(endHour, endMin, 0, 0);
// If past end hour, set to tomorrow
if (now > end) {