This page has been robot translated, sorry for typos if any. Original content here.

Countdown timer, incl. until the new Year

The countdown timer is a fairly simple and classic task for javascript.

An example of the work of the script timer before the New Year:

Countdown to the New Year

Consider the creation of a counter of days before a certain date and the same counter, but more old school with counting hours, minutes and seconds.

  < script language = "JavaScript" type = "text / javascript" > function count ( ) {

 month = 'Jan' ;
  // Month of the date of the event date = '01' ;
  // Number of the date of the event year = '2006' ;
  // Year of event date

 theDate = month + '' + date + '' + year ;

  now = new Date ( ) ;
  setdate = new Date ( theDate ) ;

  timer = ( setdate - now ) / 1000/60/60/24 ;
  timer = math  round ( timer ) ;

 var message = timer + "days before your date!"
  ;
  // Message text for your taste if ( timer == "1" ) message = timer + "event every other day" ;
  // Before the event one day if ( timer == "0" ) message = "event in less than a day" ;
  // Before the event less than one day if ( timer == "-1" ) message = "the event has come" ;
  // Event occurred if ( timer < "-1" ) message = "" ;
  // String of zero length after the event

 document.  write ( message ) ;
  } count ( ) ;
  </ script >

Option with days, hours, minutes and seconds ( countdown to the beginning of the New Year ):

  < script type = "text / javascript" > function newYearIn ( ) { var days = "days" var now = new Date ( ) ;
  var newYear = new Date ( "Jan, 01,2011,00: 00: 00" ) ;
  var totalRemains = ( newYear. getTime ( ) - now. getTime ( ) ) ;
  if ( totalRemains > 1 ) { var RemainsSec = ( parseInt ( totalRemains / 1000 ) ) ;
  var RemainsFullDays = ( parseInt ( RemainsSec / ( 24 * 60 * 60 ) ) ) ;
  if ( RemainsFullDays == 2 || RemainsFullDays == 3 || RemainsFullDays == 4 || RemainsFullDays == 22 || RemainsFullDays == 23 || RemainsFullDays == 24 || RemainsFullDays == 32 || RemainsFullDays == 33 || RemainsFullDays == 34 ) { days = "days" } if ( RemainsFullDays == 1 || RemainsFullDays == 21 || RemainsFullDays == 31
 
  ) { days = "day" } var secInLastDay = RemainsSec - RemainsFullDays * 24 * 3600 ;
  var RemainsFullHours = ( parseInt ( secInLastDay / 3600 ) ) ;
  if ( RemainsFullHours < 10 ) { RemainsFullHours = "0" + RemainsFullHours } ;
  var secInLastHour = secInLastDay - RemainsFullHours * 3600 ;
  var RemainsMinutes = ( parseInt ( secInLastHour / 60 ) ) ;
  if ( RemainsMinutes < 10 ) { RemainsMinutes = "0" + RemainsMinutes } ;
  var lastSec = secInLastHour - RemainsMinutes * 60 ;
  if ( lastSec < 10 ) { lastSec = "0" + lastSec } ;
  document.  getElementById ( 'newyear' ) .  innerHTML = "<p style = 'font-size: 22px;'> The New Year remains:" + RemainsFullDays + days + RemainsFullHours + ":" + RemainsMinutes + ":" + lastSec + "</ p>" ;
  setTimeout ( "newYearIn ()" , 10 ) ;
  }
 
  else { document.  getElementById ( "newyear" ) .  innerHTML = "C NEW YEAR !!!"
  ;
  } } newYearIn ( ) ;
  </ script >

In order for the time counter (timer) to appear on the page before the New Year , it is necessary to place any tag with id = "newyear" on the page, for example:

  <p id = "newyear"> The time remaining until the New Year </ p>

 <script type = "text / javascript">
 function newYearIn ()
 {...

and in the script set the date of the new year, which you usually celebrate (for example, the next New Year in Russia: "Jan, 01,2011.00: 00: 00").

[UPD]: 1. In order to change the font (size and color), you need to remove the tags <font size = 20> and <font> and insert the style description <style> p # newyear {font-size: 27px; color: pink;} </ style> for the timeline. 2. In order to break the line into two, paste in the right place the line "<br>", for example: "Before the New Year remains: <br>"