dminder Posted December 6, 2010 Share Posted December 6, 2010 I need to implement a visual countdown on a webpage using php/javascript. I know, javascript can do this by itself. However, I have to show how long until the server clock reaches midnight. This countdown resets every day. I have this so far: <?php session_start(); //variable containing the hours and such till midnight $midnight=date("H:i:s",mktime(24, 0, 0)); //current time stamp on the server $currtime=date("H:i:s",$_SERVER['REQUEST_TIME']); //calculate the difference... $tillmidnight=date("H:i:s", $midnight - $currtime);?><head> <script type="text/javascript"> function countdown(hours,minutes,seconds) { document.getElementById('countdown_ele').innerHTML = hours + ':' + minutes + ':' + seconds; } </script></head><body> <?php //IF a time was returned then display that time and trigger the countdown. IF($active==1){ echo "<div id='countdown_ele'></div>"; } ?></body> But am stuck with a couple of things....how or better yet where should I call the countdown to start and how do I properly pass in the needed info? Should I be keeping the variables (hours, minutes, seconds) separate and decrementing them manually? I am very frustrated and lost on this one and would appreciate some assistance.Thanks in advance! Link to comment Share on other sites More sharing options...
thescientist Posted December 6, 2010 Share Posted December 6, 2010 you're going to need to use AJAX for this. Have the website use a timer to call a function that makes an AJAX call to the server, to a PHP script. This script would use PHP's date object in which you would pass a constructed time to the date object. You would want the day, month, year, etc all to be variable except for the minutes, hours, and seconds. This will return a timestamp to you based on the servers local time settings. In other words, use the date object in PHP to get the the day, month, and year, and the pass that along with 23, 00, 00, 00 (for hours, minutes, seconds, milliseconds) to the date object and get a timestamp representation back. This would be the return value of the script, to be sent back to the client.In Javascript, you can determine the user's local time using the data object and compare it the returned time from the server. Subtract the local time from the server time to get the difference, and then use basic math functions to figure out how many hours, minutes, and seconds there in that difference, which you can then display on the screen in human readable format.http://www.w3schools.com/php/php_ref_date.asphttp://www.w3schools.com/php/func_date_mktime.asp Link to comment Share on other sites More sharing options...
thescientist Posted December 6, 2010 Share Posted December 6, 2010 Upon further reflection, I realized you don't need any client side time stuff. Just have a JavaScript function call a php script that returns the formatted time you want to display (using AJAX) and the set that to the innerHTML of some sort of HTML element, like a <p>. Using AJAX and timer will mean a user doesn't have to refresh the page to see the countdown effect. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 6, 2010 Share Posted December 6, 2010 n/m Link to comment Share on other sites More sharing options...
justsomeguy Posted December 7, 2010 Share Posted December 7, 2010 It's not going to be that great to send an ajax request once per second. It's also not the best to have PHP just return something like the number of seconds until midnight, and have a timeout that runs once a second (it will become unsynchronized after a while). The best solution may be to have PHP return the current timestamp in seconds, have Javascript figure out its timestamp in seconds, subtract to get the difference between the server and the client, and then use a function to check the current client time, add the server offset, and display the remaining time.As an example, I needed to build a stopwatch widget for an application I'm developing. The first idea was to just have a seconds property for the widget and a timeout that runs once every 1000ms which increases the seconds counter and calculates the time to display. It became apparent that with a lot of things going on, it wasn't updating the counter exactly once every 1000ms, so it was becoming slow. The solution was to store the start time instead of the number of seconds, and the update function gets the current time, subtracts the start time, figures out the elapsed seconds, and formats it for display. There were a couple tricks to make it so you could pause and restart and have it continue to work, but you'll need to do something similar. You'll need to figure out the offset between the client and server by having PHP print its timestamp as a Javascript variable, and have Javascript check its time and figure out the difference between it and the server. Once you know the difference between the two, then you can do a timeout that just checks the current client time, subtracts the server offset, and figures out how much time is left. Link to comment Share on other sites More sharing options...
dminder Posted December 17, 2010 Author Share Posted December 17, 2010 Sorry to resurrect this thread, but I still cannot get this to work and I am beyond frustrated.This is where I am at: <?php //current time stamp on the server $currtime=date("H:i:s",$_SERVER['REQUEST_TIME']); //How to make a time object //mktime(hour,minute,second,month,day,year,is_dst) $hours=(24-date("H",$currtime)); $minutes=(60-date("i",$currtime)); $seconds=(60-date("s",$currtime)); $currtime=mktime($hours,$minutes,$seconds,date("m"),date("d"),date("Y")); //echo Date("H:i:s",mktime($hours,$minutes,$seconds,date("m"),date("d"),date("Y")));?><head> <script type="text/javascript"> function newtimer(){ var mdate = new date(<?php $currtime; ?>); document.getElementById("countdown_ele").innerHTML=mdate; } newtimer(); </script></head><body> <p>Let the countdown begin!</p> <p id='countdown_ele'></p></body> and it is coming up with only the 'Let the countdown begin!", no time, nothing. Normally, I am not one to ask this, but I am being held up on publishing because of this. Would/could somebody please post code that would do a countdown until midnight for the current day using the date of the php server? The reason it has to be the php server is that there is a cron job scheduled to go off at that time. I dont care about css or anything like that, all of that is already in place I just need to display HH:MM:SS until midnight. I thank all of you and appreciate your efforts and assistance more than I can express in a forum.DPS, once it reaches midnight, it is supposed to simply restart at 24:00:00 Link to comment Share on other sites More sharing options...
justsomeguy Posted December 20, 2010 Share Posted December 20, 2010 Your code doesn't have the date quoted when you try to create a date object.The way I was talking about, in PHP you just need to use the time function to return the current timestamp in seconds. To get the same thing in Javascript, you can do this: var d = new Date();var tstamp = Math.floor(d.valueOf() / 1000); You need to divide by 1000 because Javascript returns its timestamp in milliseconds, not seconds. So you have the timestamp in the number of seconds on the server and the client. You can subtract those to get the difference between the server and client, and then do the timer in Javascript where you add the server offset to the client time to get the server time. Now you have the server time in Javascript, so you can do the countdown normally in just Javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.