|
JavaScript - Countdown Script Problem
Thread duplicated see one above!
Similar TutorialsHi 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? Hey there, first off, here is the countdown script I am using: PHP Code: <script language="JavaScript"> TargetDate = "{$timerdate}"; BackColor = "#FFFFFF"; ForeColor = "#FF0000"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days %%H%% Hours %%M%% Minutes %%S%% Seconds"; FinishMessage = "<b>Price has been reduced!</b>"; </script> Now I was wondering if I can do 2 things to this script, 1) make it "flash" during the last 10 seconds of the countdown, and 2) Once it hits 0, then it'll show the FinishMessage for perhaps 10 sec, then it would restart the countdown with a new targetdate. Is that possible at all? Hi peeps I found this script on another forum, It is nearly perfect, I was wondering if you peeps could help me make a few changes... how do I change the cut off to 8pm I have tried var c_t = 8; but it does 8am I have also tried var c_t = 20; but it doesnt work... Any ideas? Also instead of just saying "your order will ship shifted to tommrow" would it be possible to insert tomorrows date, i.e Thursday 13th and then for "and your order will ship to Monday" could it say Monday 15th etc Here is the script, Code: <html>
<head>
<script type="text/javascript">
function ord()
{
var c_t = 4;
var dd = new Date();
var ti_h = dd.getHours();
var ti_m = dd.getMinutes();
if(ti_h > c_t)
{
var di_t_h = ti_h - c_t;
var di_t_mi = 60 - ti_m;
var h = 24 - di_t_h;
var mi = di_t_mi;
var mess = h+"hours"+mi+"minutes";
}
var da = dd.getDay();
//var da = document.getElementById("da").value;
switch(da)
{
case 2:
case 3:
case 4:
case 5:
document.write("Place your order within the next 1 day"+mess+"and your order will ship shifted to tommrow");
break;
case 6:
case 7:
case 1:
document.write("and your order will ship to Monday");
break;
}
}
ord();
</script>
</head>
<body>
</body>
</html>
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... I realy need some help i pass the end_time of the script using ajax from a database then calculate the remaining time calculating the dif from the current time each second. It works for the first second then I get NaN error + the timer then refreshes back to the first output in a countinous loop.. the contents of my timer where the js does its job Code: <html>
<head>
<script type="text/javascript">
var xmlhttp;
var secs=0;
var mins=0;
var hours=0;
var days=0;
var t;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(actionvar)
{
var urlString = getHash();
var string = 'time.php?hash='+urlString+'&action='+actionvar;
loadXMLDoc(string,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("timer").innerHTML='';
var end_time=xmlhttp.responseText;
end_time = parseInt(end_time);
end_time = end_time*1000;
end_time = parseInt(end_time);
update(end_time);
var t = setTimeout(function(){myFunction(end_time);},1000);
}
});
}
function getHash(){
return document.getElementById('hash').innerHTML;
}
function update(end_time){
out="";
var d=new Date();
end_time = parseInt(end_time);
var time= parseInt(d.getTime());
var amount = end_time - time; // The time left in milliseconds
amount = parseInt(amount);
amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
days=Math.floor(amount/86400);//days
amount=amount%86400;
hours=Math.floor(amount/3600);//hours
amount=amount%3600;
mins=Math.floor(amount/60);//minutes
amount=amount%60;
secs=Math.floor(amount);//seconds
if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById('timer').innerHTML = out;
if(secs == 0 && mins == 0 && hours==0 && days == 0){
clearTimeout(t);
document.getElementById('timer').innerHTML='Boost ready';
}
}
</script>
</head>
<body style='background-image:url("main_bg.jpg");color:#580000'>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id='timer' align='center'></div>
<div align='center'>
<?php
require('global.php');
if(!isset($_SESSION['user'])){
header("Location: lol.php");
exit;
}
$id=$_SESSION['id'];
$q= mysql_query("SELECT * FROM loltimerclient WHERE id='$id'");
$row = mysql_fetch_assoc($q);
$hash=$row['hash'];
echo "<div style='visibility:hidden' id='hash'>$hash</div>";
echo '<button type="button" onClick="myFunction(0)">Start timer NOW!</button>';
?>
</div>
<div align='center'><a href='logout.php'>Logout</a></div>
</body>
</html>
And the php that retrieves the time from the database (this file passes its info through ajax to the first code) Code: <?php
require('global.php');
$hash = $_GET['hash'];
$action = $_GET['action'];
if(!isset($hash)|| !isset($action))
exit;
$search_hash = mysql_query("SELECT * FROM loltimerclient WHERE hash='$hash' LIMIT 0,1");
if(mysql_num_rows($search_hash) < 1)
exit;
$row=mysql_fetch_assoc($search_hash);
$id= $row['id'];
$q = mysql_query("SELECT * FROM loltimers WHERE user_id='$id' LIMIT 0,1 ");
$endtime = time() + (60*60*24);
if($action == 0)
if(mysql_num_rows($q) == 1){
mysql_query("UPDATE loltimers SET end_time='$endtime' WHERE user_id='$id'");
echo $endtime;
}
else{
if(mysql_num_rows($q) < 1){
mysql_query("INSERT INTO loltimers SET user_id='$id', end_time='$endtime' ");
echo $endtime;
}
}
else
if($action == 1){
$row2=mysql_fetch_assoc($q);
echo $row2['end_time'];
}
?>
Any help is greatly appriciated since i can;t seem to figure this out. Thx in advance! 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! 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, 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 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. OK well one I have tried to contact the author of this application and he no longer writes or supports it and I know nothing about javascript... so here I am BEGGING FOR HELP!!! any body will to give this a go would love to try anything here is my problem the timer is self works fine but since new updates (RECENT) in Chrome and Firefox when you move away from the window it stop the count then when you come back to it the count starts again I dont want the count to stop any ideas would be great Code: window.onload=progressBarInit;
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
var loadedcolor='<?php echo $gSurfLoadColour; ?>' ; // PROGRESS BAR COLOR
var unloadedcolor='<?php echo $gSurfUnloadColour; ?>'; // COLOR OF UNLOADED AREA
var bordercolor='<?php echo $gSurfLoadBoardColour; ?>'; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=190; // WIDTH OF THE BAR IN PIXELS
var waitTime=<?php echo $gSurfTimer - $members_time_deduct; ?>; // NUMBER OF SECONDS FOR PROGRESSBAR
// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)
//*****************************************************//
//********** DO NOT EDIT BEYOND THIS POINT **********//
//*****************************************************//
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';
}
function incrCount(){
window.status="<?php echo $gSurfWStatusCD; ?>";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
//alert((waitTime+1)-Math.ceil(loaded/10));
tempcnt = (waitTime+1)-Math.ceil(loaded/10);
document.getElementById('count').innerHTML=tempcnt;
}
function breaker_bar() {
parent.np=1;
parent.framesBreaking(false);
return true;
}
function wrong() {
parent.wsftpaw.location.replace('../index.php?_w=wrong_button');
}
function submitform(id) {
parent.np=1;
parent.framesBreaking(false);
document.surfform.cl.value=id;
document.surfform.submit();
}
function hidebar(){
document.getElementById('count').innerHTML=0;
window.status='<?php echo $gSurfWStatusEnd; ?>';
switchDiv('counter', false,0);
switchDiv('buttons', true,0);
}
//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}
function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
//Load the rest of the pages, loading sequence system
I am new to JavaScript and am enrolled in an introductory class. My assignment is to create JavaScript for a Web page that counts down the time left until several events. I have been working on this code for several hours now, and I have done everything the textbook instructs me to do, yet when I load the Web page I still get blank fields where my countdown info should be. I would really appreciate it if someone could look through the code I've created and give me some pointers. I have an .htm file and an external .js file. The .htm file is: Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 2
Review Assignment
Events in Dixon
Author:
Date:
Filename: events.htm
Supporting files: dates.js, dixon.css, logo.jpg
-->
<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type="text/javascript">
function showCountdown() {
var today = new Date("December 1, 2007 6:31:45");
var Date1 = new Date("January 14, 2007 10:00:00");
var Date2 = new Date("May 21, 2007 12:00:00");
var Date3 = new Date("July 4, 2007 21:00:00");
var Date4 = new Date("September 1, 2007 12:00:00");
var Date5 = new Date("December 1, 2007 11:30:00");
var Date6 = new Date("December 31, 2007 15: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="links1">
<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>
</div>
<div id="logo">
<img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
<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>
<td></td>
<th style="text-align: right">Current 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 am"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 pm"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 pm" 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 pm" 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 am" 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 pm" readonly="readonly" size="20" /></td>
<td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
The external .js file is: Code: /*
New Perspectives on JavaScript
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) {
date = time.getDate();
month = time.getMonth()+1;
year = time.getFullYear();
second = time.getSeconds();
minute = time.getMinutes();
hour = time.getHours();
ampm = (hour < 12) ? " am" : " pm";
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) {
year = today.getFullYear();
holiday.setFullYear(year);
(holiday < today) ? ++year : year;
holiday.setFullYear(year);
}
function countdown(start, stop) {
var time = stop - start;
var days = Math.floor(time/(1000*60*60*24);
var hours = Math.floor(time/1000*60*60);
var minutes = Math.floor(time/1000*60);
var seconds = Math.floor(time/1000);
return days +"days, "+ hours +"hrs, "+ minutes +"mins, "+ seconds +"secs"+;
}
If there is any more information that is needed, I will do my best to give that, as well. Thanks! I have a javascript countdown clock in my camping page on my website www.bsatroop459.org. It works on IE7 and IE8 but it will not work on Firefox. Could somebody give me a clue as why my countdown clock will not work in Firefox. The is a white box I can't seem to get rid of! <script language="JavaScript"> CountActive = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, and %%S%% Seconds"; </script><script language="JavaScript" type="text/javascript"> <!-- function calcage(secs, num1, num2) { s = ((Math.floor(secs/num1))%num2).toString(); if (s.length < 2) s = "0" + s; return s; } function CountBack(secs) { DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); document.getElementById("cntdwn").innerHTML = DisplayStr; if (CountActive) setTimeout("CountBack(" + (secs-1) + ")", 990); } function putspan(backcolor, forecolor) { document.write("<span id='cntdwn' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>"); } if (typeof(BackColor)=="undefined") BackColor = "white"; if (typeof(ForeColor)=="undefined") ForeColor= "black"; if (typeof(TargetDate)=="undefined") TargetDate = "6/13/2011 9:00 AM"; if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; if (typeof(CountActive)=="undefined") CountActive = true; putspan(BackColor, ForeColor); var dthen = new Date(TargetDate); var dnow = new Date(); ddiff = new Date(dthen-dnow); gsecs = Math.floor(ddiff.valueOf()/1000); CountBack(gsecs); //--> </script> <!-- comment out below for the clock --> <form name="clock_form"> <tr><td align="center" bgcolor="maroon"><font color="yellow" face="Arial, Helvetica, sans-serif"><b>Countdown to Bartle Summer Camp 2011</b> </font></td></tr> <tr> <td align="center"><input type="text" name="clock" size="60"></a></td></tr> </form> <!-- end of comment out area --> Thank you for your time. Mike Here is yet another project of mine...ive got most done but the timers are working in milliseconds and the hours, minutes, and seconds arent working right. heres the code. THE .JS FILE Code: /* 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) ? " am" : " pm";
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){
year = today.getFullYear();
holiday.setFullYear(year);
(holiday < today) ? year++ : year;
holiday.setFullYear(year);
}
function countdown(start, stop) {
time = stop - start;
days = Math.floor(time/1000*60*60*24);
hours = (days - Math.floor(days))*24;
minutes = (hours - Math.floor(hours))*60;
seconds = (minutes - Math.floor(minutes))*60;
return days + " days," + hours + "hours," + minutes + " mins," + seconds + "secs";
}
THE HTML FILE.. Code: <script type="text/javascript" src="dates1.js"></script>
<script type="text/javascript">
function showCountdown() {
var today = new Date();
var Date1 = new Date("January 14, 2007 10:00:00");
var Date2 = new Date("May 21, 2007 12:00:00");
var Date3 = new Date("July 4, 2007 21:00:00");
var Date4 = new Date("September 1, 2007 12:00:00");
var Date5 = new Date("December 1, 2007 11:30:00");
var Date6 = new Date("December 31, 2007 15: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)">
yes ive done all the coding just cant figure out why the timers wont work correctly. 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 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? 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 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... hi, i am currently trying to write a javascript program; it would be for a library reservation system. this would be put on the computers with sessions from 15 minutes to 2 hours (in 15 minute chunks i.e, 15, 30, 45, 1 hour). this program would countdown the remaining time on their session, with pop-up messages appearing every so often. at the end of the session, the program will have to automatically log the user off. i am a student studying javascript, and haven't got any idea how to even start can anyone give me a helping hand to get me started. thanks |
|||||||