[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Countdown Timer

Posted on 2006-04-09
3
Medium Priority
?
3,193 Views
Last Modified: 2008-02-01
Not sure if this is in the right category.

Can anyone help me?  I need a countdown page for someone who is retiring in 3 + years.
I would like this to look as professional as possible.  

This is what I would like -
(Everything is centered in Large Type)

Roxanne's Retirement Countdown Clock

September 30, 2009 at 5 p.m.

(Display Countdown)
Months

(Display Countdown)
Days

(Display Countdown)
Hours

(Display Countdown)
Minutes

(Display Countdown)
Seconds

If it's not pushing my luck is it possible to have two versions. One that includes weekends and the other excluding them.

I hope this isn't asking too much. Web languages are not my forte.

Thanks in advance for your help.
0
Comment
Question by:master-monkey
  • 2
3 Comments
 
LVL 6

Accepted Solution

by:
nabsol earned 2000 total points
ID: 16411757
Hi

Below is the code. Hope this helps

<html>
<head>
<script language="JavaScript">


function startCountDown()
{
TargetDate = "09/30/2009 5:00 PM";  // this is target time

var dthen = new Date(TargetDate);   //target time date
var dnow = new Date();              //current date    
ddiff = new Date(dthen-dnow);       // diffference      
gsecs = Math.floor(ddiff.valueOf()/1000);   //getseconds
CountBack(gsecs);         //call count down
}

function calcage(secs, num1, num2)   //will take seconds and convert to minutes hours days etc
{
  s = ((Math.floor(secs/num1))%num2).toString();
  if (s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";    //return number (unit)
}

function CountBack(secs)
{
  if (secs < 0) {
    document.getElementById("finished").innerHTML = "Roxanne's Retired";   //retired message
    return;
  }

  document.getElementById("mymonths").innerHTML = calcage(secs,2592000,100000);  //calculate months
  document.getElementById("mydays").innerHTML = calcage(secs,86400,30);    //calculate days
  document.getElementById("myhours").innerHTML = calcage(secs,3600,24);    //calculate hours
  document.getElementById("mymin").innerHTML = calcage(secs,60,60);        //calculate minutes
  document.getElementById("mysec").innerHTML = calcage(secs,1,60);         //calculate seconds

  setTimeout("CountBack(" + (secs-1) + ")", 990);
}
</script>
</head>

<body onload="startCountDown()">

<table border="1" bordercolor="#A8A9A0" width="80%" align="center">
<tr><td align="center">Roxanne's Retirement Countdown Clock</td></tr>
<tr><td align="center">September 30, 2009 at 5 p.m.</td></tr>
<tr><td align="center"><div id="mymonths"></div> Months</td></tr>
<tr><td align="center"><div id="mydays"></div> Days</td></tr>
<tr><td align="center"><div id="myhours"></div> Hours</td></tr>
<tr><td align="center"><div id="mymin"></div> Minutes</td></tr>
<tr><td align="center"><div id="mysec"></div> Seconds</td></tr>
<tr><td align="center"><div id="finished"></div></td></tr>
</table>
</body>
</html>


By Nab
0
 
LVL 6

Expert Comment

by:nabsol
ID: 16411807
Hi
This is socond one. This exclude the weekends. But may be it will be approximate as assumption is that averagely month is of 30 days and there will be 8 days excluded from every month. as 4 weeks and 2 weekend days. Hope this helps

<html>
<head>
<script language="JavaScript">


function startCountDown()
{
TargetDate = "09/30/2009 5:00 PM";  // this is target time

var dthen = new Date(TargetDate);   //target time date
var dnow = new Date();              //current date    
ddiff = new Date(dthen-dnow);       // diffference      
gsecs = Math.floor(ddiff.valueOf()/1000);   //getseconds

gmonths = Math.floor(gsecs/2592000)     //calculate months
gdays = Math.floor(gsecs/86400)    //calculate days

gdays = gdays - (gmonths*8)  //subtract by (totalmonths*8) i.e. total weekend days (8 in one month)
gsecs = gdays*86400     //get seconds back

CountBack(gsecs);         //call count down
}

function calcage(secs, num1, num2)   //will take seconds and convert to minutes hours days etc
{
  s = ((Math.floor(secs/num1))%num2).toString();
  if (s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";    //return number (unit)
}

function CountBack(secs)
{
  if (secs < 0) {
    document.getElementById("finished").innerHTML = "Roxanne's Retired";   //retired message
    return;
  }

  document.getElementById("mymonths").innerHTML = calcage(secs,2592000,100000);  //calculate months
  document.getElementById("mydays").innerHTML = calcage(secs,86400,30);    //calculate days
  document.getElementById("myhours").innerHTML = calcage(secs,3600,24);    //calculate hours
  document.getElementById("mymin").innerHTML = calcage(secs,60,60);        //calculate minutes
  document.getElementById("mysec").innerHTML = calcage(secs,1,60);         //calculate seconds

  setTimeout("CountBack(" + (secs-1) + ")", 990);
}
</script>
</head>

<body onload="startCountDown()">

<table border="1" bordercolor="#A8A9A0" width="80%" align="center">
<tr><td align="center">Roxanne's Retirement Countdown Clock (Excluding Weekends)</td></tr>
<tr><td align="center">September 30, 2009 at 5 p.m.</td></tr>
<tr><td align="center"><div id="mymonths"></div> Months</td></tr>
<tr><td align="center"><div id="mydays"></div> Days</td></tr>
<tr><td align="center"><div id="myhours"></div> Hours</td></tr>
<tr><td align="center"><div id="mymin"></div> Minutes</td></tr>
<tr><td align="center"><div id="mysec"></div> Seconds</td></tr>
<tr><td align="center"><div id="finished"></div></td></tr>
</table>
</body>
</html>

By Nab
0
 

Author Comment

by:master-monkey
ID: 16411916
Excellent. Thanks a lot. All I need to do now is the design but I can do that.

Thanks again.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question