JavaScript - Not Working In Ie (20sec Countdown)

Hi everyone,

I need a countdown timer that will count down exactly from a time that i set.

i want it to count in this format: hh:mm:ss.

i need it for a online shop , at the main page there are few products for sell and i want each one of them to have its own countdown timer.

in addition when it will get to 00:00:00 i want that it will automatically add like 5 hours and continue counting down..

P.s i dont know javascript..

thanks guys

Hi All,

I am trying to set up a countdown function that will be called on the click of a button.

Function is below
Code:

function countDown(sec, min) {

  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
   min = min;
  }
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
 
});

However I get an error after one second. Script can be found here - http://www.jivalot.co.uk/m.php

Can anyone help?

Kind regards,

Slate

http://icant.co.uk/sandbox/countdown.html

Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown?

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 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

Hello to all. I apologise if this question has been asked before, I am banging my head off a wall and am in need of some help.

I am trying to find a script (and failed, even on google) to create a countdown timer on a website. The details are :

a countdown timer that (a) runs off server time, not client time and (b) resets every 10 minutes.

The only example i could give to clear up any questions would be something extremely similar to facebook app games : eg mafia wars etc energy refill timers

so people visiting my web page would see a countdown timer that was counting down 10 minutes and then resetting itself, on the hour, 10 past, 20 past etc etc. And also, can the counter trigger a script, orwouldit be best to use a scheduled task for this? I do not want the timer to take the user from the web page.

I am not sure of the exact name of a such counter, so maybe thats why google is not giving me the answers i need. Any help would greatly be appreciated.

Also I know i maybe need php to run frrom a server time. I can code php half-competently, but javascript is out of my knowledge range at present (although i can usually see code and know how to adapt it to my needs etc)

Thankyou to all who can help

Hi there, I was looking for a countdown script that counts down starting at a number (50) which starts again once it reaches (0). The count down isnt in seconds, it should be in 10 second increments.

This meaning that it starts at 50, and they goes to 49 after 10 seconds..

Can anyone help?

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 -->

Hey all,

I'm trying to sort a countdown clock for my website:
http://www.cyber-technix.com/corps/index.php/

My vision of it was a transparent background, Blue text and a simple Day : Hour : Minute : Second Layout.

I found a free .js countdown clock at http://www.hashemian.com/tools/javascript-countdown.htm

Anyone got any better suggestions?

I havn't used .js much so I may need some help implementing it if someone would be kind enough to help me out, thanks.

index.php
Code:

<a href="#" onClick="getTimer();return false;">Show Timer</a>
<br />
<div id="test"></div>

getTimer.js
Code:

function getTimer() {
new Ajax.Request('filegoeshere',
{
onSuccess: function(req)
{eval(req.responseText);},
onFailu  function(){ alert('Something went wrong...') }
});
}

timer.php
Code:

<?php echo "$('test').innerHTML = '<form><input type=\"text\" name=\"timer\" id=\"timer\" size=\"8\" style=\"text-align: center;\" /></form>';"; ?>

var seconds= 30
 $('timer').value='30'
function display() {
seconds--;
 if (seconds<=-1){ 
    seconds=30
}
 else 
   $('timer').value=seconds;
    setTimeout("display()",1000) 
} 
display()

Everything seems to work, but the once the timer is in the input box, after the request, it get's stuck on 29, and will not continue counting down, and I can't seem to get it to work.

I am using ProtoType with this, and I did just take that little part out of the index.php file, since that is all that is needed from that file.

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...

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.

Hi please help me with this website. This website is used to list 6 events and then it should accurately countdown to when that event happens. As it is right now it accurately counts days, but hours, minutes, and seconds are counted down incorrectly. Here is the js file:

/*
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";
}

Here is the 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>

Please tell me what I need to do to make all of them countdown properly and tell me what technique I can use in the future to do this for future websites in case I need to countdown to 30 events. I would appreciate any help.

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!!!