Search code examples
javascripttimercountdown

Countdown timer goes into negative numbers instead of replacing html


I made this countdown timer to show a video after it reaches the end. However it just goes into negative numbers. Seems to be related to the part of the code to hide the content after expiry date. Here is a 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>

Above I set the start time and expiry time.

If the person loads the page before the countdown ends it should show the countdown. If the person loads after the countdown it will show the video. If the person loads the page after the expiry time it should show the expired message.

Timer

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

Solution

  • Your expire date is incorrect, add space before AM, then it will work, otherwise your condition is not met, because gone = NaN.

    With this it works correctly: var expiryDate = new Date('10/11/2021 01:00 AM UTC+1')