JavaScript - Countdown Script Help

Hi,

I found code for a simple javascript countdown timer, and edited it to countdown to a specific date, Sept 3rd, 2011. It works perfectly... in Firefox. Unfortunately in other browsers (I've checked Safari, Chrome, Explorer), the date reverts back to the default date that the author of the script set, Dec 31st, 2020. Any idea why it would work in Firefox but not the others? What can I do to fix it? This is site where I found the code.

Here's the original script:
Code:

<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://mysite.com/js/countdown.js"></script>

Here's what I changed it to:

Code:

<script language="JavaScript">
TargetDate = "09/03/2011 12:01 AM UTC-0500";
BackColor = "white";
ForeColor = "666666";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days left";
FinishMessage = "Today is the day!";
</script>
<script language="JavaScript" src="http://mysite.com/js/countdown.js"></script>

(Side note: I left the countdown.js file attached to the author's server because when I placed it in my "js" folder, the countdown completely disappeared.)

I've done some digging around and found that
Code:

<script language="JavaScript">

is somewhat obsolete, and that it should be replaced with
Code:

<script type="text/javascript">

But I don't have programming experience to know how to fix it-- simply replacing one with the other didn't work for me.

Any ideas? Again, it works fine on Firefox, but not other browsers...

Hi everyone;

I have searched all of the forums before posting this, every year I have a Halloween Party and post it with this script for the continuous countdown?
Now it is not working it seems to be off by one day?
Daylight savings Time Problem? Or a Leap year problem

Thank you to anyone who can help me with this ...

Code:

 


var today=new Date()

//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(),10 ,31 )

//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="Left until our Annual Halloween Party"
var onOccasiontext="It is Little Spook Day, Happy Halloween!"

var monthtext=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion

var one_day=1000*60*60*24
var calculatediff=""





calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

//Display message accordingly
var pluraldayornot=(calculatediff==0)? "Day" : "Days"
if (calculatediff>0)
	document.write("<center><b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"<br><br></b><center>")
else if (calculatediff==0)
	document.write("<b>"+onOccasiontext+" <br> "+showdate+"!<br><br></b>")

Hi everyone,

I have a countdown script I'd like to modify so that the countdown ends at a specific hour, and not on a particular day at midnight. I'm new to coding (Ruby), so still trying to get the hang of Javascript:

Code:

 
	var current="Expired"
	var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
 
	function countdown(yr,m,d){
		theyear=yr;themonth=m;theday=d
		var today=new Date()
		var todayy=today.getYear()
		if (todayy < 1000)
		todayy+=1900
		var todaym=today.getMonth()
		var todayd=today.getDate()
		var todayh=today.getHours()
		var todaymin=today.getMinutes()
		var todaysec=today.getSeconds()
		var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
		futurestring=montharray[m-1]+" "+d+", "+yr
		dd=Date.parse(futurestring)-Date.parse(todaystring)
		dday=Math.floor(dd/(60*60*1000*24)*1)
		dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
		dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
		dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
		if(dday==0&&dhour==0&&dmin==0&&dsec==1){
			document.getElementById('counter').style.display='none';
			document.getElementById('expired').style.display='block';
			return
		}
		else{
			document.getElementById('countdown_day').innerHTML=dday;
			document.getElementById('countdown_hour').innerHTML=dhour;
			document.getElementById('countdown_min').innerHTML=dmin;
			document.getElementById('countdown_sec').innerHTML=dsec;
			setTimeout("countdown(theyear,themonth,theday)",1000)
		}
	}
 
 
 
	//MODIFY THIS LINE: enter the count down date using the format year/month/day
        //e.g. countdown(2009, 03, 23);
	countdown(2011, 12, 24);

I've tried to play with it by changing the following in green:

Code:

	

function countdown(yr,m,d, h ){
		theyear=yr;themonth=m;theday=d; thehour=h 
.
.
.
setTimeout("countdown(theyear,themonth,theday, thehour )",1000)
.
.
countdown(2011, 12, 24,  10 )

But I don't seem to be getting anywhere.

Any tips or pointers to push me in the right direction is much appreciated.

Thanks!

i need help in following js code. what i want it to add micro seconds to this code.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id = "time"></div>

<script type = "text/javascript">

function display(secs) {
if (secs <= 0) { 
alert("Your time is up!");
return;
}
secs--;
document.getElementById("time").innerHTML = "You have " +
Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
setTimeout("display("+secs+")",1000);
}

display(301); // 300 seconds = 5 minutes

</script>
</body>
</html>

how can i add micro secs?

hello

i need code for my page, i need to show time elapsing, i mean 15sec countig down to 0


could you help me?

I figured if there was one it would be a Javascript but does anyone know of a countdown clock that almost looks like a counter/turnstile number row? Like this sorta:



I've been looking for one where I have the numbers look just like that and 'push' upward as the times (days, minutes, seconds) go on. Hopefully someone knows of a script >< Thanks alot!!!

I am making a website and the page is oriented around a countdown system. If the timer ever reaches 0, the whole thing will stop. Below are the specifics:
I need a countdown timer that runs from 30 seconds to 0 seconds. If the timer is at 0 seconds, the script runs php code #1 (which makes the timer stop and if any user refreshes the page, it will still stay at zero).
There is also two buttons. If user clicks on button #1, the timer will get reset to 30 seconds remaining. Then the script will run the php code #2 (which allows the timer to begin counting down again from 30 seconds). If user clicks on button #2, the timer will get reset to 5 seconds remaining and same thing follows as the first button.
And obviously the timer should show the same number (seconds remaining) for all the users on the website!
Thank You

I found this countdown timer online that starts when the page loads at 30 seconds and counts down to zero. What I need for it to do however is once it hits 0 it needs to automatically reset itself back to 30 seconds.

It's being used in conjunction with a online (not a chat room) chatterbot where people often abuse the bot with foul language. The idea being to stop them from entering text to the bot for 30 seconds.

I'm using these lines in the chatterbot where xxx would be the foul language. The stopTalk part prevents entering text for 30 seconds. The display() triggers the countdown. However, once it hits 0 it's dead in the water. If someone types another bad word the timer isn't going to work.

Note: The timer is just a visual diplay so the user can see how long he must wait. The StopTalk below is working fine to stop the user from entering text. That part isn't the problem.


Code:

if (input.search("xxx")!= -1)      
{document.result.result.value = "Stop the foul language. You can no longer enter text for 30 seconds";
display() 
stopTalk = setTimeout('icon.src=icon1.src;stopTalk=false;',30000)  
return true;}

1) Because this is an online chatterbot that temporarily stores information about the user I can't restart the timer by refreshing the page or I would lose that information.

2) I don't want to use a button to reset the timer. If at all possible I want the timer to reset automatically.


Any help would be appreciated.





Code:

<form name="counter"><input type="text" size="8" 
name="d2"></form> 

<script> 
<!-- 
// 
 var milisec=0 
 var seconds=30 
 document.counter.d2.value='30' 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1 
    document.counter.d2.value=seconds+"."+milisec 
    setTimeout("display()",100) 
} 
display() 
--> 
</script>

I'm making an additional page for a phpbb forum for a game. On the page there's 2 textareas to paste in a list of coordinates from a map and then the time it takes to get from each of the coordinates in the left box to each of the coordinates in the right box is calculates and shown in a table. Also is a date/time input, where the user will pick the desired time of arrival. I have this all calculating the times etc. but I would like in one of the columns for it to have a real-time counter that will count down the time before they need to start on the trip in order to arrive at the desired time. I am having a nightmare of a time with this. Here's the script, can someone tell me what I am doing wrong?

Code:

<!-- INCLUDE overall_header.html -->
<script language="JavaScript" type="text/javascript">
function timeLeft(now, next)
{
	var count = next - now;
	count = count/1000;
	//change to hours:mins:secs
	var secs = count % 60; 
	if (secs < 10) secs = '0'+secs;
	var countdown1 = (count - secs) / 60;
	var mins = countdown1 % 60; 
	if (mins < 10) mins = '0'+mins;
	countdown1 = (countdown1 - mins) / 60;
	var hours = countdown1 % 24;
	if(hours == 1){htext = " hr, "}else if(hours == 0){hours = "", htext = ""}else{htext = " hrs, "};
	if(mins < 2){mtext = " min, "}else{mtext = " mins, "};
	if(secs < 2){stext = " sec"}else{stext = " secs"};
	document.getElementById('timeLeft').innerHTML = hours+htext+mins+mtext+secs+stext;
	t=setTimeout('timeLeft()',500);
}
</script>
</head>
<body>
	<table class="borderlist" style="width: 100%; align: center; text-align: center">
		<tbody>
			<tr><td>{MSG}</td></tr>
			<tr>
				<td>NOW</td>
				<td>ID</td>
				<td>FIELDS</td>
				<td>TRAVEL_TIME</td>
				<td>SEND_SECS</td>
				<td>SEND_TIME</td>
				<td>TIME_LEFT</td>
				<td>SEND_IN</td>
			</tr>
			<!-- BEGIN times -->
			<tr>
				<td>{times.NOW}</td>
				<td>{times.ID}</td>
				<td>{times.FIELDS}</td>
				<td>{times.TRAVEL_TIME}</td>
				<td>{times.SEND_SECS}</td>
				<td>{times.SEND_TIME}</td>
				<td><span id="timeLeft" onload="timeLeft({times.NOW}, {times.SEND_SECS})"></td>
				<td>{times.SEND_IN}</td>
			</tr>
			<!-- END times -->
		</tbody>
	</table>
</div>
<!-- INCLUDE overall_footer.html -->

Hi guys,

I'm building a page which has a countdown timer on it (days, hours, mins) and I honestly really don't know much about Javascript at all. I have spent over half a day looking through tutorials and code snippets and think I'm close, but I'm still having trouble with the output. I need to pull out the days/hours/mins separately as they sit within different HTML elements.

The days appear to be displaying correctly, but the hours is showing 3 digits instead of 2 and the mins is showing 5 digits instead of 2:

32 days, 764 hours, 45845 mins

Here is the code I'm using:

Code:

var now = new Date();
var theevent = new Date("June 18 2011 10:00:00");
var seconds = (theevent - now) / 1000;
var mins = seconds / 60;
var hours = mins / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);

function update() {
now = new Date();
seconds = (theevent - now) / 1000;
seconds = Math.round(seconds);
mins = seconds / 60;
mins = Math.round(mins);
hours = mins / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('mins').innerHTML = mins;

ID=window.setTimeout("update();",1000);
}

Thanks a bunch in advance...

Hey guys/gals, I have a code working great, all except that I want it to start a 36 hour countdown and do it forever after the initial timer hits 0. Here's what I have so far:

PHP Code:
<html>
<body>
<center>

<div style="width:1000px;height:65px;border:3px outset blue;">

<a href="http://s260.photobucket.com/albums/ii17/zynner/?action=view&current=Aetherite_Icon.png" target="_blank"><img src="http://i260.photobucket.com/albums/ii17/zynner/Aetherite_Icon.png" border="0" alt="Aetherite"></a>

<sup><big><b>Guildleves Will Reset In: 

<script type = "text/javascript">

dateFuture = new Date(2010,9,5,22,10,30); //you can adjust this if a server reset changes leve times. 

function GetCount(){

    dateNow = new Date();                                    
    amount = dateFuture.getTime() - dateNow.getTime();        
    delete dateNow;

    if(amount < 0){

        This is where i think the loop should be, yes? If so, how can I countdown 36 hours over and over?
        
        }
    
        else{
        days=0;hours=0;mins=0;secs=0;out="";

        amount = Math.floor(amount/1000);

        days=Math.floor(amount/86400);
        amount=amount%86400;

        hours=Math.floor(amount/3600);
        amount=amount%3600;

        mins=Math.floor(amount/60);
        amount=amount%60;

        secs=Math.floor(amount);

        if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
        if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
        if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
        out += secs +" seconds";
        document.getElementById('countbox').innerHTML=out;

        setTimeout("GetCount()", 1000);
    }
}

window.onload=GetCount;

</script>

<div id="countbox"></div>

</sup>
</div>
</body>
</html> 


Any help I could get would be MUCH appreciated.

Please understand that i have looked through the different timers on the JavaScript section but did not find any that can do what i am looking for and i don't know programming to edit any of them.

I would like to have a countdown timer on my website that will count down from 12:00:01 am server time and end at midnight again of the same day (the clock should count down a full 24 hours) then it will automatically reset itself and count down again each and every day starting from 1 second after midnight. The count down should display hours : minutes : seconds just like a digital watch. I would also like to it to go with the server time and not client computer time so it will only count down according to the server time.

One more thing .... each day a new trivia question will be posted and ppl have 1 day to answer the trivia question for a chance to win something (that is why the script is counting down). Will the script be able to automatically load a new trivia each day at midnight as the timer resets or do i have to load the trivia manually? If im getting way out of my head here then lets forget this last part.

If it can be done i will certainly appreciate the advice.

In Brno, 07.06.2011

Hello everybody,

i really need your help with one issue. I have got one page running under Wordpress and i would like to add some countdown to widget to show when i will be again online.

for example:

I am online every working day (monday - friday) from 08:00 AM to 04:30 PM. So it would be nice to show to my subscribers when i would be online again.

So lets think about that is Thuesday 07:00 PM, so on my page would be visible this: "I will be back in 13 hours, 00 minutes, 00 seconds"

Or in Saturday at 07:00 PM there will be written: "I will be back in 37 hours, 00 minutes, 00 seconds"


I would really apreciate every help, thank you in advance!

Stefan alias "Scharfheimlich"

I'm not sure what im doing wrong here this technique im using works for a different countdown file. Here is the code:

/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Author: Andrew Duren
Date: 8 May 2011

Function List:
showDateTime(time)
Returns the date in a text string formatted as:
mm/dd/yyyy at hh:mm:ss am

changeYear(today, holiday)
Changes the year value of the holiday object to point to the
next year if it has already occurred in the present year

countdown(stop, start)
Displays the time between the stop and start date objects in the
text format:
dd days, hh hrs, mm mins, ss secs
*/

function showDateTime(time) {
date = time.getDate();
month = time.getMonth()+1;
year = time.getFullYear();

second = time.getSeconds();
minute = time.getMinutes();
hour = time.getHours();

ampm = (hour < 12) ? " a.m." : " p.m.";
hour = (hour > 12) ? hour - 12 : hour;
hour = (hour == 0) ? 12 : hour;

minute = minute < 10 ? "0"+minute : minute;
second = second < 10 ? "0"+second : second;

return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday) {
var year = today.getFullYear();
holiday.setFullYear(year);
year = (today > holiday) ? year + 1 : year;
year = holiday.setFullYear(year);
}

function countdown(start, stop){
time = stop - start;
var rawdays = ((time)/(1000*60*60*24));
days = Math.floor(rawdays); //milisec/sec*sec/min*mins/hour*hours/day is what's divided 4 value
var rawhours = ((rawdays - days)*24) - 1;
hours = Math.floor(rawhours);
var rawminutes = (rawhours - hours)*60;
minutes = Math.floor(rawminutes);
var rawseconds = ((rawminutes - minutes)*60) + 1;
seconds = Math.floor(rawseconds);

return days + " days, " + hours + " hours, " + minutes + " mins, " + seconds + " secs";
}

HTML file:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 2
Review Assignment

Events in Tulsa
Author: Andrew Duren
Date: 08 May 2011

Filename: events.htm
Supporting files: dates.js, logo.jpg, tulsa.css
-->

<title>Upcoming Events at Tulsa</title>
<link href="tulsa.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type = "text/javascript">

function timeLeft() {
//the today variable contains the current date and time
var today = new Date();
var Date1 = new Date("January 14, 2011 10:00:00");
var Date2 = new Date("May 21, 2011 12:00:00");
var Date3 = new Date("July 4, 2011 9:00:00");
var Date4 = new Date("September 1, 2011 12:00:00");
var Date5 = new Date("December 1, 2011 11:30:00");
var Date6 = new Date("December 31, 2011 3:30:00");
//Display the current date and time.
document.eventform.thisDay.value = showDateTime(today);

changeYear(today, Date1);
changeYear(today, Date2);
changeYear(today, Date3);
changeYear(today, Date4);
changeYear(today, Date5);
changeYear(today, Date6);

document.eventform.count1.value = countdown(today, Date1);
document.eventform.count2.value = countdown(today, Date2);
document.eventform.count3.value = countdown(today, Date3);
document.eventform.count4.value = countdown(today, Date4);
document.eventform.count5.value = countdown(today, Date5);
document.eventform.count6.value = countdown(today, Date6);

}
</script>
</head>

<body onload="setInterval('timeLeft()', 1000)">
<form name="eventform" id="eventform" action="">

<div id="logo">
<img src="logo.jpg" alt="Tulsa Events" />
</div>
<div id="links">
<a href="#">Home</a>
<a href="#">City Services</a>
<a href="#">City Agencies</a>
<a href="#">Mayor's Office</a>
<a href="#">News Today</a>
<a href="#">Upcoming Events</a>
<a href="#">Site Map</a>
<a href="#">Search Engine</a>
<a href="#">Public Notices</a>
<a href="#">Survey Form</a>
<a href="#">Contact Us</a>
<a href="#">E-Government</a>
</div>


<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
<th colspan="2" style="text-align: right">Current Date and Time</th>
<td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
<tr>
<th>Event</th>
<th>Starting Time</th>
<th>Countdown to Event</th>
</tr>
<tr>
<td><input value="Heritage Day" readonly="readonly" size="20" /></td>
<td><input value="Jan 14 at 10:00 a.m." readonly="readonly" size="20" /></td>
<td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
<td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
<td><input value="May 21 at 12:00 p.m." readonly="readonly" size="20" /></td>
<td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
<td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
<td><input value="Jul 4 at 9:00 p.m." readonly="readonly" size="20" /></td>
<td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
<td><input value="Summer Bash" readonly="readonly" size="20" /></td>
<td><input value="Sep 1 at 12:00 p.m." readonly="readonly" size="20" /></td>
<td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
<td><input value="Holiday Party" readonly="readonly" size="20" /></td>
<td><input value="Dec 1 at 11:30 a.m." readonly="readonly" size="20" /></td>
<td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
<td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
<td><input value="Dec 31 at 3:30 p.m." readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

Even tho my method works for 1 file it's inconsistent with this one, there must be a better technique I can use in case I have to do 100 countdowns on a page.