0

我有一个带有 javascript 倒计时的页面。倒计时工作正常，但是，当它到达倒计时时间时，它开始倒计时。它应该改变#nextinternetbroadcast. 如果我使用它，它确实会改变内容，document.write()但它会覆盖页面（所以我知道它if正在工作）。出于某种原因，它只是忽略了clearTimeout()andinnerHTML部分。

HTML（为简洁而编辑）：

<div id="nextinternetbroadcast" class="link"></div>
<!-- page specific javascripts -->
<script>
// set a global javascript variable
var nextlivebroadcast;
// tell the function where the JSON data is
fetchJSONFile('http://www.flcbranson.org/api/livebroadcast', function(data){
    // do something with your data
    // alert(JSON.stringify(data));
    // alert(data.datetime + ', ' + data.status);
    nextlivebroadcast = data.nextbroadcast;
});
// see if the global variable is still set (would say "undefined" if using an asychronous connection)
//alert(nextlivebroadcast);

// live broadcast countdown
cdtd(nextlivebroadcast);
</script>

JavaScript（为简洁而编辑）：

// generic get JSON data function
function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    // false tells it to be synchronous instead of asynchronous
    httpRequest.open('GET', path, false);
    httpRequest.send(); 
}

// start javascript countdown (http://www.developphp.com/view.php?tid=1248)
// don't forget to pass the broadcast variable
function cdtd(broadcast) {
    // just about any standard date format is accepted
    var nextinternetbroadcast = new Date(broadcast);
    var now = new Date();
    var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearTimeout(timer);
        document.getElementById('nextinternetbroadcast').innerHTML = '<a href="javscript:openVideo(' + livepublishingpoint + ');">Join live service now<\/a>';
        // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
        //document.write('Something');
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    document.getElementById('nextinternetbroadcast').className += " disabled";
    document.getElementById('nextinternetbroadcast').innerHTML = '<span class="days">' + days + '</span><span class="hours">' + hours + '</span><span class="minutes">' + minutes + '</span><span class="seconds">' + seconds + '</span>';
    // loop the function every second
    var timer = setTimeout(function() { cdtd(broadcast); }, 1000);
}

我做错了什么吗？我当然没有看到它。

编辑（在 JavaScript 中显示修复 - 感谢 Bergi）...

// start javascript countdown (http://www.developphp.com/view.php?tid=1248)
// don't forget to pass the broadcast variable
function cdtd(broadcast) {
    // just about any standard date format is accepted
    var nextinternetbroadcast = new Date(broadcast);
    var now = new Date();
    var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
    if (timeDiff <= 0) {
        document.getElementById('nextinternetbroadcast').innerHTML = '<a href="javscript:openVideo(' + livepublishingpoint + ');">Join live service now<\/a>';
        // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
        //document.write('Something');
    } else {
        var seconds = Math.floor(timeDiff / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);
        hours %= 24;
        minutes %= 60;
        seconds %= 60;
        document.getElementById('nextinternetbroadcast').className += " disabled";
        document.getElementById('nextinternetbroadcast').innerHTML = '<span class="days">' + days + '</span><span class="hours">' + hours + '</span><span class="minutes">' + minutes + '</span><span class="seconds">' + seconds + '</span>';
        // loop the function every second
        setTimeout(function() { cdtd(broadcast); }, 1000);
    }
}
4

1 回答 1

1

我做错了什么吗？

是的，你的timer逻辑是有缺陷的。目前你正在做

function fn() {
    if (/* no time left*/) {
        clearTimeout(timer);
        // show end message
    }
    // show countdown
    var timer = setTimeout(fn, 1000);
}

您正在尝试在启动计时器之前清除计时器。实际上，您根本不必这样做，因为那时没有计时器正在运行。你必须做的是确保计时器没有重新启动。所以将逻辑更改为

function fn() {
    if (/* no time left*/) {
        // show end message
    } else {
        // show countdown
        setTimeout(fn, 1000);
    }
}

当然，这并不能真正解释为什么您的innerHTML分配不起作用（除非有缺陷的计时器取消导致某些异常）。

于 2013-07-03T16:36:31.220 回答