|
JavaScript - Multi Countdown Timers W/loop
Anyone have a script that has multi timers that will loop; Sort of like the ones used in reverse auctions.
First timer 1:24:59:59 (days/h/m/s) Second timer 1:00:00 (h/m/s) Third timer 1:59 (m/s) Forth timer 59 (s) I have one now that I found here and makes no sense to me; 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" xml:lang="en" lang="en"> <head> <title></title> <font size="-4"><font face="bold"> <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ function zxctElsByClass(zxccls,zxcp,zxctag) { var zxcexa=zxccls.indexOf('=='); zxccls=zxccls.replace(' ==','').replace(/ss/g,' '); var zxcclss=zxccls.split(' '); zxcp=zxcp||document; zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp); zxctag=zxctag||'*'; var zxcels=zxcp.getElementsByTagName(zxctag),zxcary=[]; for (var zxc0=0;zxc0<zxcels.length;zxc0++){ for (var zxc0a=0;zxc0a<zxcclss.length;zxc0a++){ var zxcreg=new RegExp('\\b'+(zxcexa<0?zxcclss[zxc0a]:zxccls)+'\\b'); if ((zxcclss[zxc0a])&&zxcreg.test(zxcels[zxc0].className)){ zxcary.push(zxcels[zxc0]); break; } } } return zxcary; } function Upgrading(hrs,mins,secs){ hrs=zxctElsByClass(hrs); mins=zxctElsByClass(mins); secs=zxctElsByClass(secs); for (var zxc0=0;zxc0<hrs.length;zxc0++){ hrs[zxc0].oop=new UpgradingOOP(hrs[zxc0],mins[zxc0],secs[zxc0]) } } function UpgradingOOP(hrs,mins,secs){ this.time=[hrs,mins,secs]; this.cng(); } UpgradingOOP.prototype.cng=function(){ var hours=this.time[0].firstChild.data; var mins=this.time[1].firstChild.data; var secs=this.time[2].firstChild.data; secs=secs-1; if (secs<0){ mins=mins-1; secs=59; } if (mins<0){ hours=hours-1; mins=59; secs=59; } if (hours<0) { hours=0; mins=0; secs=0; this.time[0].firstChild.data=hours; this.time[1].firstChild.data=mins; this.time[2].firstChild.data=secs; window.location = document.URL; } if (mins>=0) { mins=mins-1; mins=mins+1; if (secs<10) secs="0"+secs; if (mins<10) mins="0"+mins; this.time[0].firstChild.data=hours; this.time[1].firstChild.data=mins; this.time[2].firstChild.data=secs; this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),1000); } } /*]]>*/ </script></head> <table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\"> <tr> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours'>1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> </tr> </table> <br /> <table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\"> <tr> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours' >1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> <td><label class='uHours'>1</label>: <label class='uMins'>1</label>: <label class='uSecs'>1</label></td> </tr> </table> <script type="text/javascript">Upgrading('uHours','uMins','uSecs');</script> </font></font> </body> </html> Similar TutorialsHello 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 Hello all, It's my first post. I have 0 javascript knowledge and desperately need your help. I need 5 countdown timers on my html site. I would like them to countdown from different minutes (i.e. 2:30, 5:15, 1:20, etc). Here is the script I found online: Quote: <!--countdown timer --> <div style="position:absolute; overflow:hidden; left:107px; top:390px; width:40px; height:20px; z-index:18"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> I pasted them in the div tags and it works perfectly. However, when I copy and paste them 4 times for a total of 5 timers to display, only 1 shows. Why is this happening and how can I fix it? Here is how I it looks on my index file after I pasted it 4 times: Quote: <div id="count1" style="position:absolute; overflow:hidden; left:107px; top:390px; width:45px; height:20px; z-index:29"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count2" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:30"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count3" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:31"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> <div id="count4" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:32"> <script language="JavaScript"> TargetDate = new Date().valueOf() + 2*60000 + 30*1000; BackColor = "#FFFFFF"; ForeColor = "#FF6633"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%M%%:%%S%%"; FinishMessage = "SOLD!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> </div> Please help!! Sincerely, George Hi guys, hope this is the right place to post my javascript query.... Basically, I want my countup timer to start from when the page is loaded so eg 0 in all fields... This is what i have so far: 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=utf-8" />
<title>Count?</title>
<style type="text/css">
.main {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 68px;
font-style: normal;
font-weight: 400;
color: #000;
background-color: #FFF;
text-align: center;
}
</style>
<script type="text/javascript">
function showElapsedTime()
{
var startYear = "0";
var startMonth = "0"; // must be between 0 - 11
var startDay = "0"; // must be between 1 - 31
var startHour = "0"; // must be between 0 - 23
var startMinute = "0"; // must be between 0 - 59
var startSecond = "0"; // must be between 0 - 59
var startDate = new Date();
startDate.setYear(startYear);
startDate.setMonth(startMonth);
startDate.setDate(startDay);
startDate.setHours(startHour);
startDate.setMinutes(startMinute);
startDate.setSeconds(startSecond);
var rightNow = new Date();
var elapsedTime = rightNow.getTime() - startDate.getTime();
var one_day=1000*60*60*24;
var elapsedDays = Math.floor( elapsedTime / one_day );
var milliSecondsRemaining = elapsedTime % one_day;
var one_hour = 1000*60*60;
var elapsedHours = Math.floor(milliSecondsRemaining / one_hour );
milliSecondsRemaining = milliSecondsRemaining % one_hour;
var one_minute = 1000*60;
var elapsedMinutes = Math.floor(milliSecondsRemaining / one_minute );
milliSecondsRemaining = milliSecondsRemaining % one_minute;
var one_second = 1000;
var elapsedSeconds = Math.round(milliSecondsRemaining / one_second);
document.getElementById('elapsedTime').innerHTML = elapsedDays + " Days " + elapsedHours + " Hours " + elapsedMinutes + " Minutes " + elapsedSeconds + " Seconds";
t = setTimeout('showElapsedTime()',1000);
}
</script>
</head>
<body onload="showElapsedTime()">
<p class="main"> COUNT: </p>
<div id="elapsedTime"></div>
</body>
</html>
Can't quite figure out where i have gone wrong! Thanks in advance! Carl This is my first post and hope someone can show me how to have JavaScript wait until a function has completed before moving on? I tried a timer, but the database does not always came back with data durning the time alloted. Thank you for any help. Code: function RunMerch()
//Reprompt script
{
var fW = (typeof getFormWarpRequest == 'function' ? getFormWarpRequest() : document.forms['formWarpRequest']);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
//fW._oLstChoicesMyFieldName.selectedIndex = 0;
var preFix = '';
if (fW.elements['cv.id'])
{
preFix = fW.elements['cv.id'].value;
}
setTimeout('oCV' + preFix + '.promptAction(\'reprompt\')', 1000);
{
//Call val () function -- This is where I want it to complete the reprompt
function before moving on
val();
}
}
// This will run the valtradselection() function
function val()
{
valtradselection();
}
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? Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [
{
"name" : "Menu 1",
"url" : "menu1.html",
"submenu" : [
{
"name" : "menu 1 subitem 1",
"url" : "menu1subitem1.html"
},
{
"name" : "menu 1 subitem 2",
"url" : "menu1subitem2.html"
} ]
},
{
"name" : "Menu 2",
"url" : "menu2.html",
"submenu" : [
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
},
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
} ]
},
{
"name" : "Menu 3",
"url" : "menu3.html",
"submenu" : [
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
},
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
} ]
}
];
Here is the recursive function: Code: function buildMenuHTML(menuData,level) {
var ul;
if (level == 1) {
ul = "<ul id='menu'>";
} else {
ul = "<ul class='level" + level + "'>";
}
for (i = 0; i < menuData.length; i++) {
menuItemData = menuData[i];
ul += "<li>";
ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
if (typeof menuItemData.submenu != 'undefined') {
ul += buildMenuHTML(menuItemData.submenu,level + 1);
}
ul += "</li>";
}
ul += "</ul>";
return ul;
}
Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'>
<li><a href='menu1.html'>Menu 1</a>
<ul class='level2'>
<li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
<li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
</ul>
</li>
</ul>
'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. 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 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" 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 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!!! 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. Hi to all, I got a timestamp (in the future) and I want to display on a page how many seconds this differs from now. I know how to do this in PHP, but now it's static, I want it to actually count down. After the countdown, the page should be refreshed, although I could also do this with a meta tag, as I can just find the value with PHP on load and put that value in a meta refresh tag. Could you help me out with one of these things? x5x_tim 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. 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 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 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>
hi, i need to create a javascript countdown based on the times given. If the start time is 17:45 and the end time is 19:32 (in that format) for example, how would i create a countdown for the time between 17:45 and 19:32. If anyone could point me in the right direction that would be great! thanks |
|||||||