0

JavaScriptのカウントダウンのあるページがあります。カウントダウンは正常に機能していますが、カウントダウン時間に達すると、逆方向にカウントを開始します。の内容を変更する必要があり#nextinternetbroadcastます。を使用するとコンテンツが変更されdocument.write()ますが、ページが上書きされます（したがって、が機能していることがわかりますif）。何らかの理由で、単にclearTimeout()andのinnerHTML部分を無視しています。

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 に答える