Simple Countdown

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

<!DOCTYPE html>
<html >
<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/ */
/* Downloaded from https://www.codeseek.co/ */
// 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);

This awesome code ( Simple Countdown ) is write by Chris Coyier , you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Chris Coyier