Jump to content

Js And Php Countdown Timer


Criting

Recommended Posts

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.

Link to comment
Share on other sites

Well .. I guess I'll be nice enough to go through a post for the new year. :P

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.