SitePoint Sponsor 

User Tag List
Results 1 to 11 of 11

Feb 27, 2002, 05:04 #1
 Join Date
 Mar 2001
 Location
 Melbourne, Australia
 Posts
 1,039
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Looking for a simple countdown script
I'm looking for a simple bit of a javascript that will display a minutes and seconds countdown, starting from 30 mins (or whatever number of minutes I set it to) in the future. Each time the user refreshes the browser, the script should reset back to 30 mins and start counting down again.
I found this complete script by following a Sitepoint link:
<HTML>
<HEAD>
<TITLE>Countdown Clock</TITLE>
<SCRIPT>
<!
//This clock tells you the exact days, hours, minutes, and seconds from a particular date.
var targetDate = "Feb 28, 2002"; //The day that you want to solve that it's how long from now.
var theDay = new Date(targetDate)
var DayTill //The string that is going to put all numbers together and make sense.
function countdown()
{
var today = new Date() //Create an Date Object that contains today's date.
var second = Math.floor((theDay.getTime()  today.getTime())/1000)
/*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
and devide it into 1000 to get the seconds from now to theDay.*/
var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day
CDay= day //Correct day
CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.
DayTill = CDay + " days, " + CHour + " hours "
//Rewrite the string to the correct information.
document.clock.countdown.value = DayTill //Make the particular form chart become "Daytill"
var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
}
//>
</SCRIPT>
</HEAD>
<BODY onLoad = "countdown()">
<FORM NAME = "clock">
You are <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"> from <script>document.write(targetDate);</script>.<BR>
</FORM>
</BODY>
</HTML>
...but when I change the line
DayTill = CDay + " days, " + CHour + " hours "
to
DayTill = CDay + " days, " + CHour + " hours " + CMinute " mins "
I get javascript errors on the page (and I'm not sure why).
Can anyone put me back on track?
Thanks.

Feb 27, 2002, 06:05 #2
 Join Date
 Aug 2001
 Location
 London
 Posts
 2,475
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
DayTill = CDay + " days, " + CHour + " hours " + CMinute + " mins ";
you forgott the (+)
PHP Code:
<HTML>
<HEAD>
<TITLE>Countdown Clock</TITLE>
<SCRIPT>
<!
//This clock tells you the exact days, hours, minutes, and seconds from a particular date.
var targetDate = "Feb 28, 2002"; //The day that you want to solve that it's how long from now.
var theDay = new Date(targetDate)
var DayTill //The string that is going to put all numbers together and make sense.
function countdown()
{
var today = new Date() //Create an Date Object that contains today's date.
var second = Math.floor((theDay.getTime()  today.getTime())/1000)
/*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
and devide it into 1000 to get the seconds from now to theDay.*/
var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day
CDay= day //Correct day
CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.
DayTill = CDay + " days, " + CHour + " hours " + CMinute + " mins " + CSecond + " secs ";
//Rewrite the string to the correct information.
document.clock.countdown.value = DayTill //Make the particular form chart become "Daytill"
var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
}
//>
</SCRIPT>
</HEAD>
<BODY onLoad = "countdown()">
<FORM NAME = "clock">
You are <INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"> from <script>document.write(targetDate);</script>.<BR>
</FORM>
</BODY>
</HTML>
Last edited by AndrewJ2000; Feb 27, 2002 at 06:08.

Feb 27, 2002, 20:33 #3
 Join Date
 Mar 2001
 Location
 Melbourne, Australia
 Posts
 1,039
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
How stupid do I feel?

Feb 27, 2002, 21:55 #4
 Join Date
 Aug 2001
 Location
 London
 Posts
 2,475
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Hehe,Dont worry we all do thingsd like that, gets damn annoying if you been doing it for ages, you just skip the mistake normally :P

Feb 27, 2002, 23:13 #5
 Join Date
 Mar 2001
 Location
 Melbourne, Australia
 Posts
 1,039
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Thanks for your sympathy.
At the risk of pushing my luck  how hard would it be for you to modify the script for me to make it show a countdown (only mins and secs needed) from however many minutes I specify in the script(eg. 30)? Each time the user refreshes the browser/page, the countdown should reset to the start value and start counting down again. Oh, and when it gets to zero, it should either stop there, or it should continue counting down (or up, depending on how you look at it) using negative values?
I've tried mucking around with it to get it working myself, but I'm not overfamiliar with javascript, and my attempt does not reset the countdown when I refresh the page. Here's my attempt:
<HTML>
<HEAD>
<TITLE>Countdown Clock</TITLE>
<SCRIPT>
<!
var DayTill //The string that is going to put all numbers together and make sense.
function countdown()
{
var countdown_mins = 24 // minutes to countdown from.
var countdown_secs = 24 * 600
var today = new Date() //Create an Date Object that contains today's date.
var second = Math.floor((today.getTime())/1000)
second = second  countdown_secs
var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day
CDay= day //Correct day
CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.
DayTill = CMinute + " mins " + CSecond + " secs ";
//Rewrite the string to the correct information.
document.clock.countdown.value = DayTill //Make the particular form chart become "Daytill"
var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
}
//>
</SCRIPT>
</HEAD>
<BODY onLoad = "countdown()">
<FORM NAME = "clock">
<INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc">
</FORM>
</BODY>
</HTML>

Feb 28, 2002, 01:05 #6
 Join Date
 Aug 2001
 Location
 London
 Posts
 2,475
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
urm that reminds me of a game i played, although it uses cookies to keep track of time
http://pimpwar.com
in options it enable u to display a count down when you get a new turn is that the sorta thing you want?

Feb 28, 2002, 01:36 #7
 Join Date
 Mar 2001
 Location
 Melbourne, Australia
 Posts
 1,039
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Simpler the better. I think the code in the example I'm using is more than would be needed. I don't need any fancy display  just a plain boring text countdown which resets to 30 mins (or whatever) whenever the page is refreshed. I'm being incredibly lazy here, because I could (and should) read up on javascript syntax myself. But I hardly ever use javascript on my sites  preferring to stick to serverside PHP and MySQL (which I'm reasonably handy at).

Mar 11, 2002, 08:16 #8
 Join Date
 Mar 2002
 Posts
 5
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
here is a suggestion to have it as a count down where you configer in the top the amount of minuts you whant it to count down
[VBS]
<HTML>
<HEAD>
<TITLE>Countdown Clock</TITLE>
<SCRIPT>
<!
var timeInMin = "30"; //The minutes the count down should run.
var theDay = new Date()
var countDown = theDay.getTime()+(1000*60*timeInMin);
var TimeTill //The string that is going to put all numbers together and make sense.
function countdown()
{
var today = new Date() //Create an Date Object that contains today's date.
var second = Math.floor((countDown  today.getTime())/1000)
/*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
and devide it into 1000 to get the seconds from now to theDay.*/
var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day
CDay= day //Correct day
CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.
var TimeTill = "";
if(CDay)
{
TimeTill += CDay + ":";
}
if(CHour  CDay)
{
if(CHour < 10)
{
TimeTill += "0";
}
TimeTill += CHour + ":";
}
if(CMinute < 10)
{
TimeTill += "0";
}
TimeTill += CMinute + ":";
if(CSecond < 10)
{
TimeTill += "0";
}
TimeTill += CSecond;
document.clock.countdown.value = TimeTill //Make the particular form chart become "Daytill"
var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
}
//>
</SCRIPT>
</HEAD>
<BODY onLoad = "countdown()">
<FORM NAME = "clock">
<INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"><BR>
</FORM>
</BODY>
</HTML>
[/VBS]

Mar 11, 2002, 09:24 #9
 Join Date
 Mar 2002
 Posts
 5
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
here is a suggestion to have it as a count down where you configer in the top the amount of minuts you whant it to count down
[VBS]
<HTML>
<HEAD>
<TITLE>Countdown Clock</TITLE>
<SCRIPT>
<!
var timeInMin = "30"; //The minutes the count down should run.
var theDay = new Date()
var countDown = theDay.getTime()+(1000*60*timeInMin);
var TimeTill //The string that is going to put all numbers together and make sense.
function countdown()
{
var today = new Date() //Create an Date Object that contains today's date.
var second = Math.floor((countDown  today.getTime())/1000)
/*Use getTime() to get the milisecond (1/1000 of a second) from now to theDay.
and devide it into 1000 to get the seconds from now to theDay.*/
var minute = Math.floor(second/60) //Devide "second" into 60 to get the minute
var hour = Math.floor(minute/60) //Devide "minute" into 60 to get the hour
var day = Math.floor(hour/24) //Devide "hour" into 60 to get the day
CDay= day //Correct day
CHour= hour % 24 //Correct hour, after devide into 24, the remainder deposits here.
CMinute= minute % 60 //Correct minute, after devide into 60, the remainder deposits here.
CSecond= second % 60 //Correct second, after devide into 60, the remainder deposits here.
var TimeTill = "";
if(CDay)
{
TimeTill += CDay + ":";
}
if(CHour  CDay)
{
if(CHour < 10)
{
TimeTill += "0";
}
TimeTill += CHour + ":";
}
if(CMinute < 10)
{
TimeTill += "0";
}
TimeTill += CMinute + ":";
if(CSecond < 10)
{
TimeTill += "0";
}
TimeTill += CSecond;
document.clock.countdown.value = TimeTill //Make the particular form chart become "Daytill"
var counter = setTimeout("countdown()", 1000) //Create the timer "counter" that will automatic restart function countdown() again every second.
}
//>
</SCRIPT>
</HEAD>
<BODY onLoad = "countdown()">
<FORM NAME = "clock">
<INPUT TYPE="TEXT" NAME="countdown" size="20" class="abc"><BR>
</FORM>
</BODY>
</HTML>
[/VBS]

Apr 29, 2006, 08:37 #10
 Join Date
 Mar 2006
 Posts
 37
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Would there be a way to add some language to this for when the clock counts down totally?
Like when the clock totally counts down, then some text appears like this maybe:
"Hey, you're outta time, Dude!"
Thanks

Sep 10, 2006, 05:17 #11
 Join Date
 Jun 2006
 Posts
 61
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Originally Posted by lele
Is there a way to make it work without that warning?Everyone who uses bandwidth to refer to the
amount of data transferred should also start
using phrases like "I travelled a distance of
120mph today.". Have fun attracting laughter.
Bookmarks