Criting Posted January 1, 2013 Share Posted January 1, 2013 Hi guys.I'm trying to create js and php countdown timer but i'm so low in JS ..... can u help me pls.i don't want to give me whole code.i just need example or some tut. i have a page for vote,but i also have a code ,which allow to vote per 12h.Everything is ok with php. i can't show how much time you need to wait to your next vote : example : u have to wait more 5h 21 min and 50 sec. When any user vote i add on db his/her ip and time(); when he/she voted. but i need with js to show automatically how hours,min and seconds counting down - 5h 21 min and 50 sec then 5h 21 min and 49 sec - 5h 21 min and 48 sec when it comes to 0. Sorry for my bad English but i learn English myself. Quote Link to comment https://forums.phpfreaks.com/topic/272581-js-and-php-countdown-timer/ Share on other sites More sharing options...
codefossa Posted January 1, 2013 Share Posted January 1, 2013 Well .. I guess I'll be nice enough to go through a post for the new year. Demo: http://xaotique.no-ip.org/tmp/37/ First, let's get a time from PHP. This is just in case they don't have JS enabled, they'll still get a time. We are also going to provide the HTML used by JS afterwards. <span id="remaining"> <?php function timeRemaining($date) { $diff = strtotime($date) - time(); $day = floor($diff / (60 * 60 * 24)); $day = $day < 10 ? "0" . $day : $day; $diff -= $day * 60 * 60 * 24; $hour = floor($diff / (60 * 60)); $hour = $hour < 10 ? "0" . $hour : $hour; $diff -= $hour * 60 * 60; $min = floor($diff / 60); $min = $min < 10 ? "0" . $min : $min; $diff -= $min * 60; return "{$day}:{$hour}:{$min}:{$diff}"; } echo timeRemaining("1/1/2014"); ?> </span> I made a small function to get the time until whatever date (using strtotime(), so you could use other formats). Now, this is just going to get the time until that date based on the current server time. We will set the Javascript to use the same timezone as the server, in my case Eastern US, so -5 from UTC. Note that I'm using jQuery, just so I don't have to type extra code .. $(document).ready(function() { // Function that will get us a timestamp for an offset. function getTimeOffset(offset) { var date = new Date(); var time = new Date((date.getTime() + (date.getTimezoneOffset() * 60000)) + (3600000 * offset)); return time.getTime(); } // Function to calculate difference in time. (like the one we made in php) function timeRemaining(diff) { var day = Math.floor(diff / (60 * 60 * 24 * 1000)); day = day < 10 ? "0" + day : day; diff -= day * 60 * 60 * 24 * 1000; var hour = Math.floor(diff / (60 * 60 * 1000)); hour = hour < 10 ? "0" + hour : hour; diff -= hour * 60 * 60 * 1000; var min = Math.floor(diff / (60 * 1000)); min = min < 10 ? "0" + min : min; diff -= min * 60 * 1000; var sec = Math.floor(diff / 1000); sec = sec < 10 ? "0" + sec : sec; return day + ":" + hour + ":" + min + ":" + sec; } var endTime = new Date("1/1/2014").getTime(); // A timer that will update every half a second. var timer = setInterval(function() { var diff = endTime - getTimeOffset(-5); $("#remaining").html(timeRemaining(diff)); }, 500); }); You can do checks that it's not past the date and stuff, but at the moment it would show negative time until a date that has passed. If you have any questions, feel free to ask, but it should be easy enough to follow along if you know any PHP & JS. Hopefully this is what ya wanted. It's what I got from what I could understand of your question. Quote Link to comment https://forums.phpfreaks.com/topic/272581-js-and-php-countdown-timer/#findComment-1402639 Share on other sites More sharing options...
Criting Posted January 3, 2013 Author Share Posted January 3, 2013 Omg you are awesome. Thx so much dude.I just start learing js(jquery and ajax) and i'm not so good there. I need to watch more tuts. thx again Quote Link to comment https://forums.phpfreaks.com/topic/272581-js-and-php-countdown-timer/#findComment-1403079 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.