JavaScript show div and add class if countdown has ended

Question

I have some JavaScript with a countdown ticker, when it reaches 0 it displays the text "ended".

When this happens I need to display block on two divs and add a class to another div.

Here is the JS code:

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "Ended";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + 'h ' + twoDigits( mins ) : mins) + 'm ' + twoDigits( time.getUTCSeconds() + 's' );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

countdown( "countdown", 1, 5 );
countdown( "countdown2", 100, 0 );

HTML:

<div id="countdown"></div>

Here is a fiddle: https://jsfiddle.net/vek5808u/8/

Any help would be great

Thanks

I see no jQuery https://jsfiddle.net/mplungjan/2L6zx7du/ `element.innerHTML = "Ended"; document.querySelector(".img-message").style.display="block";` — mplungjan, Mar 05 '18 at 17:33
Tried to do this for multiple classes, for both the display block and none option but it only seems to do one? So it will only add the style to one class not multiple? Thanks — John, Mar 05 '18 at 17:49
Looks like you are using jquery in your application, why dont you simply say $('.messaging').attr('style','display: block') in your timer if block? — G_S, Mar 05 '18 at 17:49
got the hide/show working now, i just used different class names. How would i add a class to a certain div on the page once the countdown has ended? — John, Mar 05 '18 at 17:53
@John you can add a class with `document.querySelector(".img-container").className += " opacity-overlay";` , take a look at my answer, — Taki, Mar 05 '18 at 17:56
@mplungjan it's just because i don't see jQuery in the OP's fiddle so i went plain JavaScript :P — Taki, Mar 05 '18 at 18:20

Taki · Answer 1 · 2018-03-05T17:47:21.030

0

inside the if block

 if ( msLeft < 1000 ) {

     document.querySelector(".messaging").style.display="block";
     document.querySelector(".img-message").style.display="block";

     document.querySelector(".img-container").className += " opacity-overlay";

     element.innerHTML = "Ended";
 }

https://jsfiddle.net/vek5808u/36/

edited Mar 05 '18 at 17:47

answered Mar 05 '18 at 17:33

Taki

17,320
4
26
47

Mr. Polywhirl · Answer 2 · 2018-03-05T19:21:06.503

There is a bit of delay between when the time starts and the time is displayed. You may need to play around with that, but the procedure is pretty simple.

I based the Countdown class on a Repeater class that someone created in another question.

I even wrapped it in a jQuery plugin for ease of use.

const twoDigits = n => n <= 9 ? '0' + n : n;
const dispTime = t => {
  var h = t.getUTCHours(), m = t.getUTCMinutes();
  return (h ? h + 'h ' + twoDigits(m) : m) + 'm ' + twoDigits(t.getUTCSeconds() + 's')
};

function Countdown(minutes, seconds, callbackFn, successFn, scope) {
  var self = this;
  this.delay = 1000;
  this.timer = setTimeout(function() { self.run(); }, this.delay);
  this.callbackFn = callbackFn;
  this.successFn = successFn;
  this.endTime = new Date().getTime() + 1000 * (60 * minutes + seconds);
  this.scope = scope || self;
}
Countdown.prototype.run = function() {
  var self = this, timeRemaining = this.timeRemaining();
  this.callbackFn.call(this.scope, timeRemaining);
  if (timeRemaining < this.delay - 1) {
    this.successFn.call(this.scope);
  } else {
    this.timer = setTimeout(function() { self.run(); }, this.delay);
  }
};
Countdown.prototype.timeRemaining = function() {
  return this.endTime - new Date().getTime();
};

(function($) {
  $.fn.countdown = function(minutes, seconds, callbackFn, successFn) {
    new Countdown(minutes, seconds, callbackFn, successFn, this);
    return this;
  };
})(jQuery);

$('#countdown').countdown(0, 10, function(msRemaining) {
  this.html(dispTime(new Date(msRemaining)));
}, function() {
  this.html("Ended");
  $('.img-message').show();
});

.messaging,
.img-message {
  display: none;
}

.img-container.opacity-overlay {
  opacity: 0.6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countdown"></div>
<div class="messaging">
  <p>messaging here</p>
</div>
<div class="img-container">
  <div class="img-message">image message here</div>
</div>

JavaScript show div and add class if countdown has ended

2 Answers2