Javascript 特定时间的倒计时重置_Javascript_Html_Timer_Reset_Countdown

Javascript 特定时间的倒计时重置

javascript html timer

Javascript 特定时间的倒计时重置,javascript,html,timer,reset,countdown,Javascript,Html,Timer,Reset,Countdown,目前我有一个脚本，它有一个特定日期的倒计时，但我希望倒计时在计时器上是特定的，所以假设我启动计时器，并将计时器设置为运行30天，它将运行30天，然后再次重置为30天并开始运行。是否可以将其更改为这样做我的代码： <body> <span id="countdown"></span> <script LANGUAGE="Javascript"> // set the date we're counting do

目前我有一个脚本，它有一个特定日期的倒计时，但我希望倒计时在计时器上是特定的，所以假设我启动计时器，并将计时器设置为运行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>


//确定我们倒计时的日期
var target_date=新日期（“2015年4月9日”）.getTime（）；
//时间单位变量
var天、小时、分钟、秒；
//获取标记元素
var countdown=document.getElementById（“倒计时”）；
//每1秒更新id为“倒计时”的标签
setInterval（函数（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数左=（目标日期-当前日期）/1000；
//做一些时间计算
天=parseInt（还剩秒/86400）；
剩余秒数=剩余秒数%86400；
小时=parseInt（剩余秒/3600）；
剩余秒数=剩余秒数%3600；
分钟=parseInt（剩余秒/60）；
秒=parseInt（剩余%60秒）；
//格式化倒计时字符串+设置标记值
countdown.innerHTML=天+天+小时+小时
+分钟+米+秒+秒；
}, 1000);

编辑：

我现在已经将代码更改为下面的样子，但是现在当我在浏览器中打开网站时，它是空白的

新代码：

<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);


//确定我们倒计时的日期
var target_date=新日期（“2015年4月9日”）.getTime（）；
//时间单位变量
var天、小时、分钟、秒；
//获取标记元素
var countdown=document.getElementById（“倒计时”）；
如果（还剩几秒钟我真的建议您利用JavaScript库，在您的情况下，这是一个完美的解决方案，您可以查看他们的文档，看看如何轻松地管理时间。总之，下面是使用moment js解决您的问题的方法
首先下载MomentJS并将其添加到您的页面
HTML代码


再简单不过了：）
JAVASCRIPT
//创建两个变量，使用减法将日期从现在起保留30
var back30Days=moment（）.subtract（30，'天'）.format（'YYYY-MM-ddh:MM:ss'）；
var countDownSeconds=Math.floor（moment（）.diff（back30Days，'seconds'）；
//包含天、小时、分钟和秒的变量
var天、分钟、小时、秒；
//设置用于执行所有计算和递减countDownSeconds的间隔函数
setInterval（函数（）{
//更新天数
天数=pad（数学楼层（倒数秒/86400），2）；
//更新时间
小时=pad（数学楼层（（倒数秒-（天*86400））/3600），2）；
//更新会议记录
分钟=pad（数学楼层（（倒数秒-（天*86400）-（小时*3600））/60），2）；
//更新秒数
秒=pad（数学地板（（倒数秒-（天*86400）-（小时*3600）-（分钟*60））），2）；
//更新我们的HTML视图
document.getElementById（“天”）.innerHTML=days+“天”；
document.getElementById（“小时”）.innerHTML=hours+'hours'；
document.getElementById（“分钟”）.innerHTML=minutes+'minutes'；
document.getElementById（“seconds”）.innerHTML=seconds+'seconds'；
//减少倒计时秒数
倒计时秒--；
//如果我们达到零，我们的计时器应该重新设置为30天，就像你说的那样
如果（倒数秒===0）{
countDownSeconds=Math.floor（矩（）.diff（返回30天，'seconds'）；
}
}, 1000);
//用于填充秒数的函数，即仅将其限制为2位数
功能板（数量、大小）{
var s=num+“”；
而（s.length

当seconds\u离开时，您真的希望浏览器中有这么大的计时器吗？不管怎样，你总是可以在到达时间时清除一个间隔，然后重新开始
    <span id="days"> </span> 
    <span id="hours"></span>
    <span id="minutes"></span> 
    <span id="seconds"></span>

 //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;
   }