Jump to content
Sign in to follow this  
jaylow

how to set a specific time and not let it refresh when a page refreshs, countdown timer

Recommended Posts

Hi, i am making a countdown timer that needs to countdown every 7 hours.seti have a time now that i can set to any time. and it counts down. now i want that it counts down ever 7 hours (starting at 14:02 to 21:02 to 4:02 to 11:02 ect)my questions are:1.how do i make it start on a specific time?2. how do i make it so that the timer does not start over everytime you refresh the page, or go to the page? i am pretty new to Javascript and this is the first thing i am "making"here is my code so farits just a countdown timer that counts down 5 seconds and restarts

var Timer;var TotalSeconds; function CreateTimer(TimerID, Time) {	Timer = document.getElementById(TimerID);	TotalSeconds = Time;	UpdateTimer()	window.setTimeout("Tick()", 1000);}function Tick() {	if (TotalSeconds <= 0) {		Timer.innerHTML = "  Time's up  ";  window.setTimeout("Tick", 1000);  CreateTimer("timer", 5)		return;	} 	TotalSeconds -= 1;	UpdateTimer()	window.setTimeout("Tick()", 1000);}function UpdateTimer() {	var Seconds = TotalSeconds;	var Days = Math.floor(Seconds / 86400);	Seconds -= Days * 86400; 	var Hours = Math.floor(Seconds / 3600);	Seconds -= Hours * (3600);	var Minutes = Math.floor(Seconds / 60);	Seconds -= Minutes * (60);	var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);Timer.innerHTML += "	" + TotalSeconds;	Timer.innerHTML = TimeStr;	}function LeadingZero(Time) {	return (Time < 10) ? "0" + Time : + Time;} </script>

i put this in the html:

<div id="timer" ><script type="text/javascript">window.onload = CreateTimer("timer", 5);</script></div >

Share this post


Link to post
Share on other sites

I'm not sure what you mean, maybe you can give some examples of how it's going to be used and what you want the user to see. Would all users on your site at once see the same time regardless of when they opened the page? One thing to keep in mind is that Javascript is not accurate with regard to things like this. Especially for a long timer like 7 hours, when it gets to the end it's not going to be accurate, the timer will be slow because the function is not going to fire exactly 1000 milliseconds apart every time (unless you have an extremely fast computer that is not doing anything else except showing your page). If you need an accurate countdown timer then you need to get the timestamp of your target time (when the timer will show 0), get the current time, calculate the difference, and display that.

Share this post


Link to post
Share on other sites

its for everyone to see the same time, i would be used to show when a planet has a production tick. (to help my faction friends in a game) "when it gets to the end it's not going to be accurate"so javascript slows down afther some time? what do you mean with a "timestamp" a excact time when the time tick is?because those i have, (if i ask around) but for a test any time will do

Share this post


Link to post
Share on other sites
its for everyone to see the same time, i would be used to show when a planet has a production tick. (to help my faction friends in a game)
How will the server know when is the next target time to show the timer for?
so javascript slows down afther some time?
No, there's just no guarantee it's going to fire exactly 1000 milliseconds apart. Your function schedules the next timeout at the end of the tick function, after it updates the HTML. Maybe it takes 10 milliseconds to update the HTML, so the next tick is going to fire after 1010 milliseconds, not 1000. Maybe your CPU is busy, so it ends up being another 5 milliseconds late, etc. Those will add up over time. It's not going to be a huge difference, but there's no guarantee it's going to be accurate. I was suggesting that you get a timestamp for the target time: var target = new Date(2013, 4, 9, 22, 30, 0); // 5/9/13 10:30 pm Then a timestamp for the current time: var now = new Date(); Then you can use the valueOf method on the date object to get the milliseconds between then and now, and that's how much time you should show for the countdown. If you're not familiar with the date object, here it is: https://developer.mo...al_Objects/Date Getting the target time and current time and taking the difference will always show the correct time from now until then. But, it's also going to depend on what the clock is set to on the user's computer, if people have different timezones or different clock settings then they will see different timers. Javascript uses the computer's clock. If you want everyone to see the same thing regardless of what their local settings are then it gets more complicated, then you need to use PHP to output the number of seconds between then and now (so that all computers use the same value from the server), and use that value from PHP to initialize the timer. Again though, that is going to depend on the clock settings for the server but you can always change what timezone you want PHP to use.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...