Simple Countdown

In this example below you will see how to do a Simple Countdown with some HTML / CSS and Javascript

Sent to me as a CSS-Tricks snippet submission by Darkylmnx.

Thumbnail
This awesome code was written by chriscoyier, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chriscoyier ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple Countdown</title>
  
  
  
  
  
</head>

<body>

  <div id="countdown">
  <span class="days"><span></span> days</span>
  <span class="hours"><span></span> hours</span>
  <span class="minutes"><span></span> minutes</span>
  <span class="seconds"><span></span> seconds</span>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chriscoyier/simple-countdown-AaGwH */
// the date when the countdown has to end yyyy, mm(starting from 0 not from 1), dd, hh, mm, ss
// for months 0 == january, 1 == february
var end = new Date(2014, 7, 6, 00, 00, 00),
    countdown = $('#countdown'),
    days = countdown.find('.days span'),
    hours = countdown.find('.hours span'),
    minutes = countdown.find('.minutes span'),
    seconds = countdown.find('.seconds span'),
    set_count_down, time_loop;

set_count_down = function () {

    var now = new Date(),
        time_left = (end.getTime() - now.getTime()) / 1000,
        d, h, m;

    // any call back you want to put when the countdown finishes
    if(time_left <= 0) {
        clearInterval(time_loop);
        
      
      
        return;
    }

    d = Math.floor(time_left/86400);
    time_left -= d*86400;

    h = Math.floor(time_left/3600);
    time_left -= h*3600;

    m = Math.floor(time_left/60);
    time_left -= m*60;

    days.html(d); 
    hours.html(h);
    minutes.html(m);
    seconds.html(Math.floor(time_left));
};

time_loop = setInterval(set_count_down, 1000);

Comments