JavaScript - Problem With Timer
Similar TutorialsCode: <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, 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 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 Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps. On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options. While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image. Here's a link to the site so you can see for yourself: http://nebula-andra.com/ (And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see) Here's the code I have for the image timer... In the header, in a Javascript tag: Code: var currPic = 0; var totPics = 12; var keepTime; var picName; function setupPicChange(){ keepTime=setTimeout("changePic()", 2000); } function changePic(){ currPic++; if(currPic > totPics) currPic = 1; document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png"; setupPicChange(); } function stopTimer(){ clearTimeout(keepTime); } function startTimer(){ keepTime=setTimeout("changePic()", 2000); } In the body: Code: <body onload="setupPicChange();"> <div id="logo_setup"> <p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo"> I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture. If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me. Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well. 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. Hi I am working on a chat application and am a bit stuck...In the database I have a field status which is set 1 for online and 0 for offline (PHP/MySQL)(at time of logging in/out), this shows the users status on a webpage. What I need is to know if there is a way I can set a timer so that if the user has been inactive for X amount of time, the database is auto updated and user is offline (1 set to 0). Thanks for any help I recieve I'm trying to build a time but it isn't displaying on screen Code: <html> <head> <script type="text/javascript"> function StartCounting(){ setInterval("DoCounting()", 1000) } function DoCounting(){ var obj =getElementbyId('countingtext'); obj.innerHTML = '' + Counter; Counter++; if( Counter > 10) { Counter = 0; document.writeln("Timer Reset"); } } </script> </head> <body onload= "StartCounting()"> Here it is:<span id="countingtext"></span> </body> </html> How could I lock an "Enter" link on an intro page with a 30 second timer that is displayed on the bottom of the page and disables the "Enter" link so that visitors have to wait 30 seconds to read the rules/announcements before entering?
Alright, im trying for my project to make 1 div scroll through a list of pictures. I have it so that it starts when I click the button. Now what im trying to do is after I start the timer I have the button changing values to 'Pause' instead of 'Start' but I can't figure out how to code to make the timer pause when i click the button again. Code: HTML: <input id="timer" style="position: absolute; font-size: 50px; background-color: red; top:750px;left: 800px; height: 75px; width: 120px;" type="button" value="Start" onclick="myTimer = setInterval('picture()', 2000); document.getElementById('timer').value = 'Pause';"> Code: Javascript: function picture() { soccerImg.src = soccerPic[state]; state++; if(state == 35) { state = 0; } } 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 everyone I need a function which will record the amount of time that a window has been open for. Upon load, the function should start a timer, and upon close, the function should store the number of minutes and seconds to a field on the form called 'Time'. My concern with this is whether you can write to a DOM element upon closre of a window, or whether we loose that ability as soon as the close event happens? if you could help priovide ideas around doing this then I'd be very grateful Dom Hi people, Im really stuck, I have a script I want to load when my page opens, I can et it to do this fine, but I want to be able to input a delay time, any time I want. So my page loads, 1,2,3,4,5 then my script kicks in. I have searched hi and low, but my understanding with JS is very basic, but I am willing myself to learn. Thank you very much in advance for your help. Bev 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, 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 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. Hi folks, I am in need of a functionality for a system where in there 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 20 + hours of the create time, After a long 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 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; Hello everyone. I'm using the script Old Pedant posted here (huge thanks man!), however, I'm looking to have the timer display six numbers at all times. For example: If the timer has 15 hours, 35 minutes, and 10 seconds left it is currently displaying as: 15:35:10 - Perfect! If the timer has 5 hours, 35 minutes, and 10 seconds left it is currently displaying as: 5:35:10 - Humm, not so perfect. In the second example, would like the timer to keep a zero in front of the hours when ever it drops below 10. So the second example should display as: 05:35:10. Any help is greatly appreciated. Posted below is the modified code I'm using. Thanks! Code: <html> <head> <script type="text/javascript"> // really really simple to get the time from the server // this is for an ASP server: //var serverTime = <%= DateDiff("s",#1/1/1970#,Now())%>; // PHP Servers: var serverTime = <?php echo time(); ?>; // serverTime will hold the number of seconds since 1/1/1970 0:00:00 as it is on the server // we must adjust it to compensate for GMT offset // My server is on Pacific Daylight Time, so 7 hours offset: serverTime += 0 * 3600; // 7 hours, 3600 seconds per hour // NOTE: This adjustment MAY NOT be needed for PHP servers...I dunno. // // so calculate how far off the client is from the server: var now = new Date(); var clientTime = now.getTime(); // number of *milliseconds* since 1/1/1970 0:00:00 on client serverTime *= 1000; // convert server time to milliseconds, as well // the client and server disagree by this much: var clockOff = serverTime - clientTime; // could well be negative! // hopefully you can see, from basic algebra, that // serverTime = clientTime + clockOff // we want target to be 0:00:00 of next day var target = new Date( serverTime ); // serverTime in JS form // so bump the day by one and leave time as 0,0,0: target = new Date( target.getFullYear(), target.getMonth(), target.getDate() + 1 ); // and now ready for our timer countdown: var ticker = null; // the interval timer function countdown( ) { var clientNow = ( new Date() ).getTime(); var serverNow = clientNow + clockOff; // see? this is where we use that offset! var millisLeft = target.getTime() - serverNow; // milliseconds until server target time var secsLeft = Math.round( millisLeft / 1000 ); var timeLeft; var timeLeftWords; if ( secsLeft <= 0 ) { timeLeftWords = "Expired!"; timeLeft = "0 days 00:00:00"; clearInterval( ticker ); } else { var secs = secsLeft % 60; var minsLeft = Math.floor( secsLeft / 60 ); var mins = minsLeft % 60; var hrsLeft = Math.floor( minsLeft / 60 ); var hrs = hrsLeft % 24; var days = Math.floor( hrsLeft / 24 ); timeLeftWords = days + " days, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds"; timeLeft = + (hrs < 10 ? "0" : "" ) + hrs + ":" + (mins < 10 ? "0" : "" ) + mins + ":" + (secs < 10 ? "0" : "" ) + secs; } document.getElementById("ticktock").innerHTML = timeLeft; } function startup( ) { countdown(); // first time setInterval( countdown, 1000 ); // then once a second } </script> </head> <body onload="startup()"> Time: <span id="ticktock"></span><br/> </body> </html> Hi im new to javascript , i have a game when 2 or more players enter the game a button appears one of the players clicks the button the game starts, what i want to do is when 2 or more players join the game i want the game to start, and not start by using the button. here is the code for the button. PHP Code: if(($hand == '') && ($numplayers > 1)){ ?> var betbuttons = '<'; betbuttons += 'input type="button" name="Button" value="<? echo addslashes($BUTTON_START); ?>" class="betbuttons" onclick="push_action(\'start\');">'; 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> |