Your Internet Explorer is too old :( Please upgrade to latest IE or switch to Firefox/Google Chrome for better view!
New Year's Eve Countdown
Days
000
:
Hours
00
:
Minutes
00
:
Seconds
00

December 19, 2011

New Year Countdown Clock

This is JavaScript widget which shows a countdown clock that will end on New Year‘s 2020 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.





New Year's Eve Countdown
Days
000
:
Hours
00
:
Minutes
00
:
Seconds
00

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, 2020
  • var newyeartime store time in milliseconds since January 1, 1970 to January 01, 2020
  • var todaytm creating new instance of local time
  • var timeleft store time in millisecond, difference of current time and January 01, 2020
  • 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, 2020 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! 

16 comments:

  1. Thank you very much for sharing your new year counter code.
    great work

    ReplyDelete
  2. Can you tell me how to add this falling share button on my site?

    ReplyDelete
    Replies
    1. Just keep an eye on this blog. Soon there will be a post about it.

      Delete
  3. how would we remove the days counter?, I want to put it on a big screen on New Years Eve

    ReplyDelete
  4. Awesome work.Just wanted to drop a comment and say I am new to your blog and really like what I am reading.Thanks for the share

    ReplyDelete
  5. I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.

    ReplyDelete
    Replies
    1. You can say thanks by dropping a backlink in your comment :D

      Delete
  6. Can you tell me how to add this falling share button on my site?

    ReplyDelete
    Replies
    1. The code is availabe in page source, you can copy-paste if you wish.

      Delete
  7. How can i change the font size of the timer?

    ReplyDelete
    Replies
    1. You can change it using CSS. It is there in the first line of CSS #scg-nyc-wrapper{color:gray;font-size:30px;

      Delete
  8. Hello!
    I wonder what I have to do to have a particular html, css and js file.
    Greetings from Slovenia and thanks.

    Robert

    ReplyDelete
  9. Hello.

    I would like to ask for some sort of code to be in the * .html, * .css and * .js files.
    I copied
    style to *.css,
    script to *.js
    and in html call with the command
    link rel="stylesheet" type="text/css" href="*.css"
    and
    script src = "*.js"/.

    The style is loaded but javascript are not executed.

    Thanks and nice regards from Slovenia.

    Robert.

    ReplyDelete
  10. What does this thing do? eval(atob('c3RhcnRUaW1lcigpO2RvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJzY2ctbnljLXdyYXBwZXIiKS5vbmNsaWNrPWZ1bmN0aW9uKCl7d2luZG93LmxvY2F0aW9uPSJodHRwOi8vd3d3LnNlY3JldHNvZmdlZWtzLmNvbS8yMDExLzEyL25ldy15ZWFyLWNvdW50ZG93bi1jbG9jay5odG1sP215cmVmPW55In0='));

    ReplyDelete