如何设置倒计时并在HTML/JavaScript中循环秒数

-2

我想做一个倒计时并将其放入我的网站。我做了一个倒计时，但是我有一个问题，当我启动它，秒数冻结它们不运行了...
这里是我做过什么：如何设置倒计时并在HTML/JavaScript中循环秒数

<span id="dhour"></span> h <span id="dmin"></span> min <span id="dsec"></span> sec 
<div id="count2"></div> 
<div class="numbers" id="dday" hidden="true"></div> 
<script> 
    var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); 
    var year; 
    var month; 
    var day; 
    var hour = 19; 
    var minute = 10; 
    var tz = 0; 
    var ladate; 
    var today; 

    function myCallback(json) { 

     ladate = new Date(json.dateString); 

     year = ladate.getFullYear(); 
     month = ladate.getMonth() + 1; 
     day = ladate.getDate(); 
     countdown(year, month, day, hour, minute); 
    } 

    function countdown(yr, m, d, hr, min) { 
     theyear = yr; 
     themonth = m; 
     theday = d; 
     thehour = hr; 
     theminute = min; 
     today = ladate; 
     var todayy = today.getYear(); 
     if (todayy < 1000) { 
      todayy += 1900; 
     } 

     var todaym = today.getMonth(); 
     var todayd = today.getDate(); 
     var todayh = today.getHours(); 
     var todaymin = today.getMinutes(); 
     var todaysec = today.getSeconds(); 
     var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec; 
     var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60); 
     var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min); 
     var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60)); 
     var dd = futurestring - todaystring; 
     var dday = Math.floor(dd/(60 * 60 * 1000 * 24) * 1); 
     var dhour = Math.floor((dd % (60 * 60 * 1000 * 24))/(60 * 60 * 1000) * 1); 
     var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000))/(60 * 1000) * 1); 
     var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000))/1000 * 1); 

     if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) { 
      document.getElementById('count2').style.display = "inline"; 
      document.getElementById('after').style.display = "none"; 

      document.getElementById('dday').style.display = "none"; 
      document.getElementById('dhour').style.display = "none"; 
      document.getElementById('dmin').style.display = "none"; 
      document.getElementById('dsec').style.display = "none"; 
      document.getElementById('days').style.display = "none"; 
      document.getElementById('hours').style.display = "none"; 
      document.getElementById('minutes').style.display = "none"; 
      document.getElementById('seconds').style.display = "none"; 
      return; 
     } else { 
      document.getElementById('count2').style.display = "none"; 
      document.getElementById('dday').innerHTML = dday; 
      document.getElementById('dhour').innerHTML = dhour; 
      document.getElementById('dmin').innerHTML = dmin; 
      document.getElementById('dsec').innerHTML = dsec; 
      setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000); 
     } 
    } 
</script> 
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback"></script>

谢谢。
希望解决这个问题。

来源

2017-01-09 Sheva07

你在哪里调用该函数？ –

如上所述，您不会在显示的代码中的任何位置调用该函数。还要注意，你已经把这个问题标记为'jquery'和'php'，而这两个都没有使用，甚至在你的问题中提及。这可能导致人们（如）点击你的问题，而他们可能没有太多的知识。 – Loek

在JavaScript – Sheva07

如果你这样做：

function countdown(yr, m, d, hr, min) { 
    /**/console.log(yr, m, d, hr, min); 
}

...你会看到你打电话，每次countdown有相同的价值观。

在你的代码没有增加任何变量：

setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);

来源

2017-01-09 15:49:32

即使你在函数中添加的东西倒数仍然不是实时的 – Sheva07

@ Sheva07当然，如果你修复这可能会有其他错误。我没有执行全面的错误报告。 –

的answer from Álvaro González正确地描述了为什么如预期的代码不工作。我建议你从倒计时的最小工作解决方案开始，然后用代码的一部分逐步更新，沿着它仍然有效的方式进行测试，直到你的代码完全按照预期工作。下面是可以用自定义代码扩展工作倒计时的一个简单的代码示例：

function startCountdown(targetdate){ 
 
    var timerID = setInterval(function(){//repeat this function each 1000 ms 
 
    //get current date updated at each repetition 
 
    var now = new Date; 
 
    //compare this to the target date 
 
    var differenceInSeconds = Math.floor((targetdate - now)/1000); 
 
    //if targetdate has not yet been reached 
 
    if(differenceInSeconds > 0){ 
 
     //display how much time left 
 
     var message = differenceInSeconds + ' seconds left until ' + targetdate; 
 
    } else { 
 
     //display that countdown is over 
 
     var message = 'Targetdate has been reached' 
 
     //clear timer 
 
     clearInterval(timerID); 
 
    } 
 
    document.getElementById('showCountdown').innerHTML = message; 
 
    }, 1000); //set function to repeat every second 
 
} 
 

 
//start countdown, set to 15 seconds from the time it is started 
 
startCountdown(new Date((+new Date) + 1000 * 15));

<div id="showCountdown"></div>

来源

2017-01-09 16:19:07

如何设置倒计时并在HTML/JavaScript中循环秒数

回答

相关问题