Countdown timer

**john83** · 13-08-2010

Hi all, I am looking to create a coundtown timer in javascript. I have downloaded a good script that works fine but I would like it to report the time remaining as Years, Months, Days, Hours, Minutes, Seconds.

At the moment it doesn't have the years on. I've tried tweaking myself but it doesn't work. The un-tweaked code is below. Hope someone can help. Thanks, John.

Code:

/*
Author: Robert Hashemian
http://www.hashemian.com/

You can use this code in any manner so long as the author's
name, Web address and this disclaimer is kept intact.
********************************************************
Usage Sample:

<script language="JavaScript">
TargetDate = "12/31/2020 5:00 AM";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
*/

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

**JAMES_911** · 13-08-2010

Something like below would work for you I assume:

HTML Code:

<html>
 <head>
 <title>Recipe 15.9</title>
 <style type="text/css">
 table {border-spacing: 0}
 td {border: 2px groove black; padding: 7px; background-color: #ccffcc}
 th {border: 2px groove black; padding: 7px; background-color: #ffffcc}
 .ctr {text-align:center}
 </style>
 <script type="text/javascript">
 if (document.images) {
     var imgArray = new Array();
     imgArray[0] = new Image(60,120);
     imgArray[0].src = "digits/0.gif";
     imgArray[1] = new Image(60,120);
     imgArray[1].src = "digits/1.gif";
     imgArray[2] = new Image(60,120);
     imgArray[2].src = "digits/2.gif";
     imgArray[3] = new Image(60,120);
     imgArray[3].src = "digits/3.gif";
     imgArray[4] = new Image(60,120);
     imgArray[4].src = "digits/4.gif";
     imgArray[5] = new Image(60,120);
     imgArray[5].src = "digits/5.gif";
     imgArray[6] = new Image(60,120);
     imgArray[6].src = "digits/6.gif";
     imgArray[7] = new Image(60,120);
     imgArray[7].src = "digits/7.gif";
     imgArray[8] = new Image(60,120);
     imgArray[8].src = "digits/8.gif";
     imgArray[9] = new Image(60,120);
     imgArray[9].src = "digits/9.gif";
 }
 
 var nextYear = new Date().getYear() + 1;
 nextYear += (nextYear < 1900) ? 1900 : 0;
 var targetDate = new Date(nextYear,0,1);
 var targetInMS = targetDate.getTime();
 var oneSec = 1000;
 var oneMin = 60 * oneSec;
 var oneHr = 60 * oneMin;
 var oneDay = 24 * oneHr;
 
 function countDown() {
     var nowInMS = new Date().getTime();
     var diff = targetInMS - nowInMS;
     var scratchPad = diff / oneDay;
     var daysLeft = Math.floor(scratchPad);
     // hours left
     diff -= (daysLeft * oneDay);
     scratchPad = diff / oneHr;
     var hrsLeft = Math.floor(scratchPad);
     // minutes left diff -= (hrsLeft * oneHr);
     scratchPad = diff / oneMin;
     var minsLeft = Math.floor(scratchPad);
     // seconds left diff -= (minsLeft * oneMin);
     scratchPad = diff / oneSec;
     var secsLeft = Math.floor(scratchPad);
     // now adjust images
     setImages(daysLeft, hrsLeft, minsLeft, secsLeft);
 }
 
 function setImages(days, hrs, mins, secs) {
     var i;
     days = formatNum(days, 3);
     for (i = 0; i < days.length; i++) {
         document.images["days" + i].src = imgArray[parseInt(days.charAt(i))].src;
     }
     hrs = formatNum(hrs, 2);
     for (i = 0; i < hrs.length; i++) {
         document.images["hours" + i].src = imgArray[parseInt(hrs.charAt(i))].src;
     }
     mins = formatNum(mins, 2);
     for (i = 0; i < mins.length; i++) {
         document.images["minutes" + i].src = imgArray[parseInt(mins.charAt(i))].src;
     }
     secs = formatNum(secs, 2);
     for (i = 0; i < secs.length; i++) {
         document.images["seconds" + i].src = imgArray[parseInt(secs.charAt(i))].src;
     }
 }
 
 function formatNum(num, len) {
     var numStr = "" + num;
     while (numStr.length < len) {
         numStr = "0" + numStr;
     }
     return numStr
 }
 
 window.onload = function() {setInterval("countDown()", 1000)};
 </script>
 </head>
 <body style="margin-left: 10%; margin-right: 10%">
 <h1>New Year's Countdown Timer</h1>
 <hr />
 
 <table cellspacing="5" cellpadding="5">
 <tr>
 
     <td align="right">
         <img name="days0" src="digits/0.gif" height="120" width="60" alt="days">
         <img name="days1" src="digits/0.gif" height="120" width="60" alt="days">
         <img name="days2" src="digits/0.gif" height="120" width="60" alt="days">
     </td>
     <td align="left">
         <img src="digits/days.gif" height="120" width="260" alt="days">
     </td>
 </tr>
 <tr>
     <td align="right">
 
         <img name="hours0" src="digits/0.gif" height="120" width="60" alt="hours">
         <img name="hours1" src="digits/0.gif" height="120" width="60" alt="hours">
     </td>
     <td align="left">
         <img src="digits/hours.gif" height="120" width="360" alt="hours">
     </td>
 </tr>
 <tr>
     <td align="right">
         <img name="minutes0" src="digits/0.gif" height="120" width="60" alt="minutes">
         <img name="minutes1" src="digits/0.gif" height="120" width="60" alt="minutes">
     </td>
     <td align="left">
         <img src="digits/minutes.gif" height="120" width="450" alt="minutes">
 
     </td>
 </tr>
 <tr>
     <td align="right">
         <img name="seconds0" src="digits/0.gif" height="120" width="60" alt="seconds">
         <img name="seconds1" src="digits/0.gif" height="120" width="60" alt="seconds">
     </td>
     <td align="left">
         <img src="digits/seconds.gif" height="120" width="460" alt="seconds">
     </td>
 </tr>
 </table>
 
 </body>
 </html>

**john83** · 13-08-2010

Hi, thanks for the reply. Ive just tried that code but unfortunately it just shows up empty boxes (where an image is expected). Also that doesn't include years either. I'm just looking for something simple that can fit on one line of a webpage (not a big multi-frame).

Can the code in my original post be edited to include the year? I'll keep trying :-)

**Gusgr8** · 14-08-2010

Whenever you want to actually include that value on the page, simply add a single line of JavaScript within the HTML code:

Code:

<script>document.write(daysLeft);</script>

To put it all together, here's a simple little page that has both JavaScript code pieces displayed:

Code:

<html>
<head>
<title>JavaScript Countdown timer test</title>

<script language="javascript" type="text/javascript">

today  = new Date();
todayEpoch  = today.getTime();

target = new Date("28 February, 2005"); 
targetEpoch = target.getTime();

daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>

</head>
<body>

<h1>DoD inspection in

<script>document.write(daysLeft);</script>

days. Are you ready?
 </h1>

</body>