倒计时计时器变为负数而不是替换 html

Question

我制作了这个倒数计时器，以便在视频结束后显示视频。然而，它只是变成负数。好像跟过期后隐藏内容的部分代码有关。这是一个JS fiddle


<div id="countdown"></div>
<div id="playsession"></div>
<script>
            var releaseDate = new Date('05/29/2021 9:00 UTC+1');
            var expiryDate = new Date('10/11/2021 01:00AM UTC+1');

            var cdNotice = 'This session will appear automatically when the countdown finishes';
            var trDay   = ' Days';
            var trHours = ' Hours';
            var trMin   = ' Minutes';
            var trSec   = ' Seconds';
            var media   = "<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"><div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"><iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/eiwj630vxa?videoFoam=true\" title=\"June 19 &amp; 20 ~ Refresh &amp; Revive ~ Gen Rabten ~ 1 Video\" allow=\"autoplay; fullscreen\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen msallowfullscreen width=\"100%\" height=\"100%\"><\/iframe><\/div><\/div>\r\n<script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script>";      
        </script>

上面我设置了开始时间和结束时间

如果用户在倒计时结束前加载页面，页面应该显示倒计时。如果该人在倒计时后加载，它将显示视频。如果用户在过期时间后加载页面，它应该显示过期消息。

计时器

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;


function showRemaining() {
    var now = new Date();
    var distance = releaseDate - now;
    var gone = expiryDate - now;
            if (distance < 0 && gone > 0) {

        clearInterval(timer);

        document.getElementById('countdown').innerHTML = "";
        document.getElementById('playsession').innerHTML = media;

        return;
    }
            if (gone < 0) {

        clearInterval(timer);
        document.getElementById('playsession').innerHTML = '<p>This video has now expired</p>';

        return;
    }        
    
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = '<p>' + cdNotice + '</p>';
    document.getElementById('countdown').innerHTML += '<p>';
    if (days > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + days + trDay + '</b>&nbsp;&nbsp;';
    }
    if (hours > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + hours + trHours + '</b>&nbsp;&nbsp;';
    }
    if (minutes > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + minutes + trMin + '</b>&nbsp;&nbsp;';
     }
    document.getElementById('countdown').innerHTML += '<b>' + seconds + trSec +'</b>';
    document.getElementById('countdown').innerHTML += '</p>';    
}

timer = setInterval(showRemaining, 1000);

Answer 1

你的过期时间不对，在AM前加上space就可以了，否则不符合你的条件，因为gone = NaN.

这样就可以正常工作了： var expiryDate = new Date('10/11/2021 01:00 AM UTC+1')

倒计时计时器变为负数而不是替换 html

Countdown timer goes into negative numbers instead of replacing html

javascript

timer

countdown