Question

我想倒计时并把它放在我的网站上。我做了一个倒计时，但我有一个问题，当我启动它时，秒钟冻结它们不再运行了...
这是我做的：

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

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

Answer 1

如果你这样做：

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

...你会看到你每次都使用相同的值调用countdown。

您的代码中没有任何内容会增加任何变量：

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: