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.

Example of a timer script before the New Year:

Countdown to the New Year

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

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

 month = 'Jan' ;
  // Month of the date of the event date = '01' ;
  // Date of occurrence of the event year = '2006' ;
  // Date of occurrence of the event

 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 to your taste if ( timer == "1" ) message = timer + "day after day" ;
  // Before the event, one day if ( timer == "0" ) message = "event in less than a day" ;
  // Up to an event of less than one day if ( timer == "-1" ) message = "event has occurred" ;
  // Event occurred if ( timer < "-1" ) message = "" ;
  // Zero-length string after the occurrence of an event

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

Option with days, hours, minutes and seconds ( countdown to 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;'> Until the New Year there are:" + RemainsFullDays + days + RemainsFullHours + ":" + RemainsMinutes + ":" + lastSec + "</ p>" ;
  setTimeout ( "newYearIn ()" , 10 ) ;
  }
 
  else { document.  getElementById ( "newyear" ) .  innerHTML = "HAPPY NEW YEAR !!!"
  ;
  } } newYearIn ( ) ;
  </ script >

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

  <p id = "newyear"> Time remaining before the New Year </ p>

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

and in the script itself set the date of the new year that you usually celebrate (for example, the nearest 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 <font size = 20> and <font> tags and insert the style description p # newyear {font-size: 27px; color: pink;} </ style> for the time line. 2. To split a string into two, insert the line "<br>" into the desired place, for example: "Before the New Year there are: <br>"