D4mations.com

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



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

d4mer

, , , , , , , , , , , ,

37 responses to “Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials”

  4. 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.

  14. 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>

  17. 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. 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

  27. 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. 🙂

  31. 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");

  36. 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>

Leave a Reply