JavaScript - How Do I Position A Countdown Timer On Screen?

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

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>

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.

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.

I'm going crazy trying to figure this out. What I'm looking for is a javascript timer / count down script. When the hours, minutes and seconds hit 0, I need a button the page to become enabled and I also need a button to pause the timer and start it. I have the following code so far. Willing to pay $50 for solution... Code:

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// how many minutes
var mins = 30;

// how many seconds 
var secs = mins * 60;

function countdown() {
	setTimeout('Decrement()',1000);
}
function Decrement() {
	if (document.getElementById) {
		minutes = document.getElementById("minutes");
		seconds = document.getElementById("seconds");
		// if less than a minute remaining
		if (seconds < 59) {
			seconds.value = secs;
		} else {
			minutes.value = getminutes();
			seconds.value = getseconds();
		}
		secs--;
if(secs > 0)
{
setTimeout('Decrement()',1000);
}
	}
}
function getminutes() {
	// minutes is seconds divided by 60, rounded down
	mins = Math.floor(secs / 60);
	return mins;
}
function getseconds() {
	// take mins remaining (as seconds) away from total seconds remaining
	return secs-Math.round(mins *60);
}
</script>
</head>
<body onload="countdown();">
	Countdown: <form><input id="minutes" type="text" style="width: 22px;"> minutes <input id="seconds" type="text" style="width: 22px"> seconds remaining.</form>
</body>
</html>

Ok, I have been trying for the last week to get my head around this javascript thing to create myself a countdown timer. And after many search keywords in whatever search engine I still couldn't find any good results which could meet my needs. I actually found a cute little script here on the forum, but unfortunately, and after many times trying, couldn't make it work for me as well. Yes it did what it was supposed to do, but I need something more specific.

So here's the thing. I am working with PHP variables and need two countdown timers on one page. I have altered the script in various ways, and it kinda works, but whenever it starts running, the top countdown timer starts with the correct amount of seconds but then jumps to the same output as the below one.

Code:

<span id = \"closingtimer". $target ."\">". $seconds ."</span>

<script type=\"text/javascript\">
 var seconds = ". $seconds .";
					 
 function display". $target ."() { 
  seconds --;
  if (seconds < 1) {
    closeMyAd();
  } else {
    document.getElementById( \"closingtimer". $target ."\" ).innerHTML = seconds ;
    setTimeout(\"display". $target ."()\", 1000);
  }
 }
					
display". $target ."();
</script>

$target is a variable from the Db
$seconds is the amount of seconds

The script IS in a loop to be able to perform the function twice for the two different targets with their amount of seconds. Due to this (I suspect) the timer is counting down at 2 seconds at a time, which also is quite annoying

Target 1 has 2400 seconds and target 2 has 1600 seconds.

How can I make this work correctly and without having a huge script in the middle of my page?

Hi there,

Hopefully someone will be able to help me here. I found the below script that works fine for the actual countdown, but when the user refreshes the page, the countdown starts from 5 minutes again.

What I am trying to do, is handle users that put something in their shopping cart and then get side tracked or what ever reason and that same product then being purchased by another person when I only have 1 left.

So using PHP I am going to subtract the qty of that product by 1 and then I want the website to either put it back, if the users checkout times out, or if a normal process it is taken out permanently.

So long story short I think I need some sort of 'memory' for the javascript, so the user can't just keep refreshing and it starting from 5 minutes each time. Also it needs to be carried through to other pages.

Your help is greatly appreciated.

Thanks,
Simon.



Code:

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php */

var mins
var secs;

function countdown() {
 	mins = 1 * CDm("5"); // change minutes here
 	secs = 0 + CDs(":01"); // change seconds here (always add an additional second to your total)
 	CDredo();
}

function CDm(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function CDs(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function CDdis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function CDredo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.getElementById("countdown").firstChild.nodeValue = CDdis(mins,secs);
	//document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		countdown = setTimeout("CDredo()",1000);
 	}
}

function coundowninit() {
  countdown();
}
</script>

Code:

<span id="countdown">&nbsp;</span>

Hi, Im looking for a simple script or solution that will allow a timer to count down 48hrs from a set time of the day and then after that reset and start the process again.

For Example:
Order within 23 hours 6 minutes
for Delivery Tommorow

The problem I have got is im not sure how to create a timer that does not reset every time you refresh the browser etc.

Any hep would be great as im stumped with this one!

Thanks

Hi folks,

I am in need of a functionality for a system where in there is PHP mysql system having a table "bid" which has columns(bid_product, "createtime")

basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps counting till 5+ hours or so of the createtime, After a tiring search for timers i finally found a .Js which would work just fine for static values

Within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh the page to check the time left.

Please have a look at the code and let me know what could be wrong

testingtime.php Code:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Vott</title>
	<script type="text/javascript" src="js/testtime.js"></script>
	<style>
	p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
	</style>
	

</head>

<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
  <tr>
    <td width="78%"><h1>My Logo Image</h1></td>
  </tr>
</table>

	<span class="bids">
	
		<p class="timer"><b>bid Closes in :</br>
		<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
		</span></b></p></span></br></br>
		
		</body>
		</html>

The Javascript code
Code:

var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached

function timeleft(mydate){

// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);

// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)

var year = date.getYear();			// in what year will your target be reached?
var month = date.getMonth();			// value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate();				// between 1 and 31
var hour =date.getHours();				// between 0 and 24
var minute = date.getMinutes();			// between 0 and 60
var second = date.getSeconds();			// between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
	var now = new Date();
	if(now.getYear() < 1900)
		yr = now.getYear() + 1900;
	var sec = end.getSeconds() - now.getSeconds();
	var min = end.getMinutes() - now.getMinutes();
	var hr = end.getHours() - now.getHours();
	var dy = end.getDate() - now.getDate();
	var mnth = end.getMonth() - now.getMonth();
	var yr = year - yr;
	var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
	if(sec < 0){
		sec = (sec+60)%60;
		min--;
	}
	if(min < 0){
		min = (min+60)%60;
		hr--;	
	}
	if(hr < 0){
		hr = (hr+24)%24;
		dy--;	
	}
	if(dy < 0){
		dy = (dy+daysinmnth)%daysinmnth;
		mnth--;	
	}
	if(mnth < 0){
		mnth = (mnth+12)%12;
		yr--;
	}	
	var sectext = " Seconds ";
	var mintext = " Minutes, and ";
	var hrtext = " Hours, ";
	var dytext = " Days, ";
	var mnthtext = " Months, ";
	var yrtext = " Years, ";
	if (yr == 1)
		yrtext = " Year, ";
	if (mnth == 1)
		mnthtext = " Month, ";
	if (dy == 1)
		dytext = " Day, ";
	if (hr == 1)
		hrtext = " Hour, ";
	if (min == 1)
		mintext = " Minute, and ";
	if (sec == 1)
		sectext = " second ";
if(now >= end){
		document.getElementById("timeleft").innerHTML = endtext;
		clearTimeout(timerID);
	}
	else{
	//alert(now.getHours()+1);
	document.getElementById("timeleft").innerHTML =min + ":" + sec;
	//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
	}
	timerID = setTimeout("timeleft()", 1000); 
}
window.onload = timeleft;

Hi there.

I am wanting to create a countdown timer that is based on a SELECT feature.
If a user selected 15 MINUTES, the script would know 15 minutes was selected and would prompt start to time down when selected.

Or if the user selected 30 MINUTES it would go to countdown from 30 minutes.

I would also like a stopwatch feature on there if STOPWATCH was selected.

It would also be great if when counting down the background box of the timer turns red to visually show the timer had gone over and start counting back up in minus to show how many minutes/seconds it has gone over.

I've looked on good old Google but can't find a code i'm looking for!

Thanks


Ash

Hi.
I'm looking for a simple JS countdown timer for a quiz that counts down 60 seconds. I've done a lot of searching and have found plenty of countdown timers for a specific time/date in the future, but nothing for my needs.

I just want it to count down from 60 seconds to zero.

Thanks a lot for your help!

Code:

<script language="JavaScript">
TargetDate = "12/5/2009 12:00 PM";
BackColor = "grey";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "Its finally here";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

i found this code on a website. it is a countdown timer. and i wanted to put it on a forum. but i think there will be a problem when others view it.. i think that other people from different time zones will see the time countdown different times.. is there a way to include a specific time zone (i.e. mine?) in this code?


BTW its suppose to go to December 5, 2009. i am in GMT-6 Central Time.

Hi guys. I'm making a webpage for a school project and I need help modifying this timer he

http://web.mac.com/rkuhnhenn/Countdo.../Style_3b.html

I want it to countdown from 48 hours, and as soon as it counts down, I need it to reset. I need an endless countdown of 48 hours.

How can I go about doing that?


Thanks guys, your help is highly appreciated.

Using the following script:

<script language="JavaScript">TargetDate = "01/22/2010 7:50 AM UTC-0500";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "Call In Now!!! Lines Are Open"
</script>

Want target date to equal every day so it resets after the target date and time is hit. Optionally, it would be nice to have it reset 60 minutes after target is hit (so the FinishMessage can display) but if that's too complicated, I'd be happy to not have to manually reset the date every day. I apologize in advance for being a newbie and this may be a straight-forward and simple issue.

Hey,

I'm taking a javascript class and have to do an assignment in which I'm supposed to show countdowns to various events. I have 2 files, an external js file and a html file.

But I can't get it to work I've searched the forum and googled it but all the solutions I've found do not work.

Here's the code.

.js file:

Code:

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

   Author: 
   Date:  
 
   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) {
   var date = time.getDate();
   var month = time.getMonth()+1;
   var year = time.getFullYear();

   var second = time.getSeconds();
   var minute = time.getMinutes();
   var 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 = changeYear.getFullYear();
	holiday.setFullYear(year);
	year = (today > holiday) ? year + 1 : year;
	year = holiday.setFullYear(year);
}

function countdown(start, stop) {
	time = stop - start;
   	seconds = Math.floor(time/1000);
   	minutes = Math.floor(seconds/60);
   	hours = Math.floor(minutes/60);
   	days = Math.floor(hours/24);
   
   return days + " days," + hours + " hours," + minutes + " mins," + seconds + " secs";

}

And here's the HTML file:

Code:

<?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: 
   Date:   

   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">
   	showCountdown(){
   		var today = new Date("October 31, 2010 10:00:00");
   		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");
   		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('showCountdown()', 100)">

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

Thanks for your help, I appreciate it