如何設置倒計時並在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中循環秒數

回答

相關問題