New Year Countdown Clock

December 19, 2011

New Year Countdown Clock

Posted by Sumit In Category: jQuery

This is JavaScript widget which shows a countdown clock that will end on New Year‘s 2023 eve, and clock will be replaced by personal new year message.
You can add this script to your blog, website or somewhere else that support java script, html and CSS.
Copy the code below and paste to your website where you want to show countdown timer. If you are on blogger platform copy script and add new HTML/JavaScript widget then paste this code to its body.

      <style type="text/css">
    #scg-nyc-wrapper{color:gray;font-size:30px;line-height:normal;text-align:center;cursor:pointer;padding:5px;background:rgba(255, 255, 255, 0.5);}
    .scg-nyc-digits-wrapper{display:inline-block;vertical-align:bottom}
    .scg-nyc-digits-type{font-size:13px}
    .scg-nyc-digit > span{background:#fff none repeat scroll 0 0;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-shadow:1px 1px 1px #d1c1c1;display:inline-block;padding:2px 7px;margin:0 1px}
    .scg-nyc-sep{padding:5px 0;animation:sep-blinks 1s linear infinite;-moz-animation:sep-blinks 1s linear infinite;-webkit-animation:sep-blinks 1s linear infinite;}
    @keyframes sep-blinks {
        0%{opacity:1}
        50%{opacity:0}
        100%{opacity:1}
    }
    @-moz-keyframes sep-blinks {
        0%{opacity:1}
        50%{opacity:0}
        100%{opacity:1}
    }
    @-webkit-keyframes sep-blinks {
        0%{opacity:1}
        50%{opacity:0}
        100%{opacity:1}
    }
</style>
<div id="scg-nyc-wrapper">
    <div id="scg-nyc-msg">
        New Year's Eve Countdown</div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">
            Days</div>
        <div class="scg-nyc-digit" id="scg-clock-days">
            <span>0</span><span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep">
        : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">
            Hours</div>
        <div class="scg-nyc-digit" id="scg-clock-hr">
            <span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep">
        : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">
            Minutes</div>
        <div class="scg-nyc-digit" id="scg-clock-mins">
            <span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep">
        : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">
            Seconds</div>
        <div class="scg-nyc-digit" id="scg-clock-secs">
            <span>0</span><span>0</span>
        </div>
    </div>
</div>
<script type="text/JavaScript">
    /**
     * New Year 2023 Countdown Timer.
     *
     * @author 5um17
     * @link http://www.secretsofgeeks.com/2011/12/new-year-countdown-clock.html
     **/
     function startTimer() {
        var newyr = new Date("January 1, 2023 00:00:00");
        var newyeartime = newyr.getTime();
        var todaytm = new Date();
        var todaytime = todaytm.getTime();
        var timeleft = newyeartime - todaytime;
        var leftdays = timeleft / 86400000;
        var lefthr = 23 - todaytm.getHours();
        var leftmin = 59 - todaytm.getMinutes();
        var leftsec = 59 - todaytm.getSeconds();
        if (Math.floor(leftdays) <= -1) {
            document.getElementById('scg-nyc-msg').innerHTML = "It's New Year Time, Friends!<br/>Happy New Year 2023";
            return;
        } else {
            document.getElementById('scg-clock-days').innerHTML = scgWrapChars(Math.floor(leftdays), -3);
            document.getElementById('scg-clock-hr').innerHTML = scgWrapChars(lefthr, -2);
            document.getElementById('scg-clock-mins').innerHTML = scgWrapChars(leftmin, -2);
            document.getElementById('scg-clock-secs').innerHTML = scgWrapChars(leftsec, -2);
        }
        setTimeout('startTimer()', 999);
    }

    /**
     * Wrap each word in span.
     * 
     * @link http://stackoverflow.com/a/15602535/2384623
     */
    function scgWrapChars(str, pad) {
        str = (Math.pow(10, Math.abs(pad)) + str.toString()).slice(pad);
        return str.replace(/\w/g, "<span>$&</span>");
    }

    startTimer();

    //clicking on the clock will redirect to this link. Keep this link as it is to support author.
    document.getElementById("scg-nyc-wrapper").onclick = function () {
        window.location = "http://www.secretsofgeeks.com/2011/12/new-year-countdown-clock.html?myref=ny";
    }
</script>

New Year's Eve Countdown

Days

000

Hours

Minutes

Seconds

Customizing code: This JavaScript is almost simple. Only few things you have to understand to modify this.

var newyr Creating new date instance of January 01, 2023
var newyeartime store time in milliseconds since January 1, 1970 to January 01, 2023
var todaytm creating new instance of local time
var timeleft store time in millisecond, difference of current time and January 01, 2023
var leftdays calculate and store days left using timeleft variable.
Math.floor() convert floating value in integer (lowest integer )
if (Math.floor(leftdays) <= -1) check if leftdays value reaches below 0 i.e -1
setTimeout('startTimer()',500) call function after every 0.5 second to update time.

So if you want to change timer then change the target date that is var newyr=new Date("January 1, 2023 00:00:00"); then the timer will we changed according to the target date.
You can also personalize message or time format these are written in If and else block.
Having any trouble ? comment here!