在特定时间倒计时重置
Countdown reset on specific time
目前我有一个脚本,它有一个特定日期的倒计时,但我希望倒计时在计时器上是特定的,所以假设如果我启动计时器并且我已经将计时器设置为运行 30 天,然后它将运行 30 天,然后再次重置回 30 天并开始运行。是否可以更改它来这样做?
我的代码:
<body>
<span id="countdown"></span>
<script LANGUAGE="Javascript">
// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
</script>
</body>
编辑:
我现在已经将代码更改为如下所示,但是现在当我在浏览器中打开网站时,它是空白的。
新代码:
<span id="countdown"></span>
<script LANGUAGE="Javascript">
// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
if (seconds_left <= 0){
target_date = target_date + 30 days;
}
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
我真的建议您利用JavaScript库,在您的情况下,JS是完美的解决方案,您可以查看他们的文档并了解如何轻松管理时间。无论如何,这是使用时刻JS解决您的问题。
首先下载 js 并将其添加到您的页面。
网页代码
<span id="days"> </span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
没有比这更简单的:)
JAVASCRIPT
//create two variables for holding the date for 30 back from now using substract
var back30Days = moment().subtract(30, 'days').format('YYYY-MM-DD H:mm:ss');
var countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
//variables holding days, hours , minutes and seconds
var Days, Minutes, Hours, Seconds;
// Set Interval function for performing all calculations and decrementing the countDownSeconds
setInterval(function () {
// Updating Days
Days = pad(Math.floor(countDownSeconds / 86400), 2);
// Updating Hours
Hours = pad(Math.floor((countDownSeconds - (Days * 86400)) / 3600), 2);
// Updating Minutes
Minutes = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600)) / 60), 2);
// Updating Seconds
Seconds = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600) - (Minutes * 60))), 2);
// Updation our HTML view
document.getElementById("days").innerHTML = Days + ' Days';
document.getElementById("hours").innerHTML = Hours + ' Hours';
document.getElementById("minutes").innerHTML = Minutes + ' Minutes';
document.getElementById("seconds").innerHTML = Seconds + ' Seconds';
// Decrement the countDownSeconds
countDownSeconds--;
// If we reach zero , our chrono should reset to 30 days back again, as you told
if (countDownSeconds === 0) {
countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
}
}, 1000);
// Function for padding the seconds i.e limit it only to 2 digits
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
这是一个jsfiddle
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 将日期时间javascript绑定到表列
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 在特定时间倒计时重置
- 如何制作倒计时计时器并在时间到时更新MySQL记录
- 在javascript中使用PHP时间字符串后,倒计时不起作用
- 钛合金未来的日子和时间倒计时
- 如何从服务器倒计时并在一段时间后触发事件
- 时间倒计时(角度2)
- 如何创建在特定时间重置的倒计时
- 为什么我的AngularJS ngModel绑定到时间输入,而不绑定到日期输入
- 倒计时计时器在Chrome和Firefox上显示不同的剩余时间
- 日期和unix时间之间的时间,以及计时器倒计时
- 倒计时 Unix 时间
- 角度引导时间选取器不绑定时间
- jquery 移动版的最佳绑定时间
- 在javascript中添加/减去倒计时的时间
- 如何修复跳过每次点击按钮进入倒计时的时间?(或者每次点击都重置倒计时)