• Monday , 19 November 2018

Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials

Code Canyon



This video is about creating a countdown clock in JS using HTML & CSS.

Website: http://samsolomonprabu.com/

Source file: https://drive.google.com/file/d/0B6RD52SkI2-cX0xETEQ0R256V1k/view?usp=sharing

Original source

3d Ocean

Related Posts

37 Comments

  1. Shetuham International
    October 17, 2017 at 11:20

    This is a very good work

  2. ZerefGG
    October 17, 2017 at 11:20

    Thank you

  3. Mario Berner
    October 17, 2017 at 11:20

    Nice, but the date not finish 00:00:00:00 🙁

  4. Randa Elkhashen
    October 17, 2017 at 11:20

    Great Work, but I have a problem in new date function, when I give it a date of the event and try to print it in the console it gives me a wrong date, it adds about 30 days or month more ! how can I fix it thanks in advanced.

  5. chaudhary Majidjatt
    October 17, 2017 at 11:20

    hy

  6. Alex Burke
    October 17, 2017 at 11:20

    Great video. Is there an easy tweak to make it count UP from a certain date instead of count down? Thanks

  7. Nathan D
    October 17, 2017 at 11:20

    hey can I have help? How can i detect when the timer reaches 0 so I could make an output like, "the timer has reached 0"

  8. Fred & Nika
    October 17, 2017 at 11:20

    Thank you very much for this tutorial!

  9. DATTATRAYA BHABAL
    October 17, 2017 at 11:20

    it's not even working on sublime

  10. DATTATRAYA BHABAL
    October 17, 2017 at 11:20

    I am working on visual studio

  11. DATTATRAYA BHABAL
    October 17, 2017 at 11:20

    it's not working dude

  12. Bob Raynor
    October 17, 2017 at 11:20

    Sam, this is a great tutorial. But how do you stop the counter once it hits 0? Right now it starts counting in negative numbers. Thanks!

  13. Mike
    October 17, 2017 at 11:20

    Cant get it to work in firefox 🙁 but works great everywhere else

  14. Audrey Belair
    October 17, 2017 at 11:20

    Hey, my countdown is not running! I compared my code with yours and can't find what's wrong with it. Please help me find a solution 🙂

    <html>
    <head>
    <style type="text/css">
    body{
    background: #f6f6f6;
    }
    .countdownContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background: #ddd;
    padding: 10px;
    margin-top: 200px;
    }
    .countdown{
    font-size: 60px;
    background-color: black;
    opacity: 0.85;
    }
    </style>
    </head>
    <body>
    <table class="countdownContainer">
    <tr class="info">
    <td colspan="4"></td>
    </tr>
    <tr class="countdown">
    <td id="days">200</td>
    <td id="hours">50</td>
    <td id="minutes">33</td>
    <td id="seconds">12</td>
    </tr>
    <tr>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td>Seconds</td>
    </tr>
    </table>
    <script type="text/javascript">

    function countdown(){
    var now = new Date();
    var eventDate = new Date(2017, 07, 12);

    var currentTime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime – currentTime;

    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);
    // var w = Math.floor(d / 7);

    h%= 24;
    m%= 60;
    s%= 60;

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    document.getElementById("days").textContent = d;
    document.getElementById("days").innerText = d;

    // document.getElementById("weeks").textContent = w;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
    }
    countdown();
    </script>
    </body>
    </html>

  15. Der Gondor
    October 17, 2017 at 11:20

    nice dankeschön

  16. Syed Ali
    October 17, 2017 at 11:20

    I couldn't do itdidn't work

  17. Kevin Rouwkema
    October 17, 2017 at 11:20

    Great video you got, only one problem if i change the date to the date i want it is counting plus 30 days so it says 165 days and it must be 135 days can you plz help me out

    my eventDate code:

    var eventDate = new Date(2017, 6, 9);

  18. kiwicrafter kiwi
    October 17, 2017 at 11:20

    Hi Sam, great stuff. My question is this:
    I want the time left to a specific date to be showing the same no matter where you are in the world.
    If you use this script, say to Christmas your time, then the time remaining will be different in other time zones around the world.
    How can I set it so that visitors to my website all see the same amount of time remaining, lets say 1st April, no matter where you are in this world.
    Like an auction countdown.
    Cheers

  19. Nwafor Sylvanus
    October 17, 2017 at 11:20

    Hi Sam,
    This is great work!
    Weldone!
    I tried it on my website.
    It worked but the days calculation from start time to eventTime was wrong.
    What can I do?
    Again WELDONE!
    THUMBS UP!

  20. LengChai Krishna
    October 17, 2017 at 11:20

    Can u help me to post in my fb fan page need urgent….

  21. Jesuye David
    October 17, 2017 at 11:20

    NVM I found it.

  22. Jesuye David
    October 17, 2017 at 11:20

    Hey! Thanks for posting your work. Please where can I find the source code?

  23. Antonis Ioannou
    October 17, 2017 at 11:20

    great tutorial. how can I add a loop so that that when the timer ends, another div(html) is shown instead? thanks!!

  24. Max Rigoli
    October 17, 2017 at 11:20

    great job !!!!!!!

  25. Pratik Sharma
    October 17, 2017 at 11:20

    Its a great video covering a very subtle topic!

  26. Aliasgor Apu
    October 17, 2017 at 11:20

    thanks for this tuotrial

  27. Christy Wood
    October 17, 2017 at 11:20

    I'm not getting the correct time to display on my website.

    Here is the code I'm using.

    <table class="countdownContainer1">
    <tr class="info">
    <td colspan="5"><font color="#00ff00"><font size="+4">Cerner Go-Live</font></font></td>
    </tr>
    <tr class="info">
    <td id="weeks">58</td>
    <td id="days">6</td>
    <td id="hours">5</td>
    <td id="minutes">23</td>
    <td id="seconds"><font color="#ff0000">59</font></td>
    </tr>
    <tr class="info">
    <td>Weeks</td>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td><font color="#ff0000">Seconds</font></td>
    </tr>
    </table>
    <script type="text/javascript">

    function countdown()
    {
    var now = new Date();
    var eventDate = new Date("2018, 01, 08");

    var currentTime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime – currentTime;

    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);
    var w = Math.floor(d /7);

    d %= 7;
    h %= 24;
    m %= 60;
    s %= 60;

    document.getElementById("weeks").textContent = w;
    document.getElementById("days").textContent = d;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
    }

    countdown();
    </script>

    Any help would be greatly appreciated. I am relatively new to coding. 🙂

  28. Joseph Pinder
    October 17, 2017 at 11:20

    Sam, how would I apply this to multiple dates on the same page?

  29. Laura Yepes Aranda
    October 17, 2017 at 11:20

    Hi, if i want to change the date, not for christmas but other date, which element i have to modify?

  30. Saíd Ahmed
    October 17, 2017 at 11:20

    Video was very helpful.

    Thank you.

    Would love to see more content.

  31. Taiwo Adefala
    October 17, 2017 at 11:20

    Thanks for the tutorial but i am facing issues converting it to a function, so i use it in multiple places on the same page
    Below is the code:
    function mysqlTimeStampToDate(timestamp) {
    //function parses mysql datetime string and returns javascript Date object
    //input has to be in this format: 2007-06-05 15:26:02
    var regex=/^([0-9]{2,4})([0-1][0-9])([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
    }
    function countdown(date){
    var now = new Date();
    var eventDate = new Date(Date.parse(mysqlTimeStampToDate(date)));

    var currentTiime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime – currentTiime;

    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);

    h %= 24;
    m %= 60;
    s %= 60;

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    document.getElementById("days").textContent = d;
    document.getElementById("days").innerText = d;

    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown(mysqlTimeStampToDate(date)), 1000);
    }

    countdown("2016-11-09 12:00:00");

  32. justkamil com
    October 17, 2017 at 11:20

    Great thanks

  33. Danton
    October 17, 2017 at 11:20

    How can I stop countdown when it hits zero. Or show other text?

  34. Ali Asadi
    October 17, 2017 at 11:20

    hello can you help me to add this code to my site for my giveaway countdown
    https://mrartix.com/giveaway.html

  35. Dominik Ježík
    October 17, 2017 at 11:20

    what's name of this editor(you was used)

  36. atika gupta
    October 17, 2017 at 11:20

    Hi…my timer is not running…kindly give a solution..
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Heading Elements</title>
    <style type="text/css">
    body{
    background: url(maintenancebackground2.jpg) no-repeat left top;
    background-size: 100%;
    }
    .box{
    text-align: center;
    }
    h4{
    font-family:sans-serif;
    font-size:14px;
    color: WHITE;
    text-align: center;
    }
    .countdown{
    position: absolute;
    top:70%;
    left:50%;
    transform: translateX(-50%)translateY(-50%);
    padding: 10px;
    font-size: 50px;
    }
    </style>
    </head>
    <body>

    <br>
    <br>
    <div class="box">
    <img src="logoo.png" height="130" width="250">
    </div>
    <p><h1 style="color:WHITE;font-family:fantasy;text-align:center;"> MAINTENANCE PAGE</h1></p>
    <h4>Our website is currently undergoing scheduled maintenance.Sorry for the inconvenience</h4>
    <table class="countdown" style="color:#d9d9d9;text-align:center;" width="400" cellspacing="50">
    <tr>
    <td colspan="4"></td>
    </tr>
    <tr>
    <td id="days">7</td>
    <td id="hours">2</td>
    <td id="minutes">30</td>
    <td id="seconds">40</td>
    </tr>
    </table>
    <script type="text/javascript">
    function countdown(){
    var now = new Date();
    var eventDate = new Date(2016, 11, 25);

    var currentTime=now.getTime();
    var eventTime=eventDate.getTime();

    var remTime=eventTime-currentTime;

    var s=Math.floor(remTime / 1000);
    var m=Math.floor(s/60);
    var h=Math.floor(m/60);
    var d=Math.floor(h/24);

    h%=24;
    m%=60;
    s%=60;

    h= (h<10) ? "0" + h : h;
    m= (m<10) ? "0" + m : m;
    s= (s<10) ? "0" + s : s;

    document.getElementByID("days").textContent =d;
    document.getElementByID("days").innerText =d;
    document.getElementByID("hours").textContent =h;
    document.getElementByID("hours").innerText =h;
    document.getElementByID("minutes").textContent =m;
    document.getElementByID("minutes").innerText =m;
    document.getElementByID("seconds").textContent =s;
    document.getElementByID("seconds").innerText =s;

    setTimeout(countdown,1000);
    }
    countdown();
    </script>
    </body>

  37. Md Saidul
    October 17, 2017 at 11:20

    great boss

Leave A Comment

You must be logged in to post a comment.