Creating a count-down system

Creating a count down system

In this tutorial I will show you how to create a simple count down system.

Step 1.
First of all let's collect what we need to make our idea to a working code. We want to calculate how many day, hours, minutes and seconds are until a given date is coming. To do this we need the date and time in the future (let's call it to target date) and the actual date and time informations. In this tutorial we will use a hard coded target date. To make our calculation more easy and to avoid any date/time string format problem just define each date component separate like this:

<?php
// Define your target date here
    $targetYear   = 2007;
    $targetMonth  = 9;
    $targetDay    = 10;
    $targetHour   = 12;
    $targetMinute = 00;
    $targetSecond = 00;

?>

Step 2.
As next step we have to calculate the difference between the actual date and the target date. To do this we will convert/get both date values to a UNIX timestamp in a long integer format which containing the number of seconds between the Unix Epoch (January 1 1970 00:00:00 GMT) and the time specified. To convert the target date use the built in PHP function mktime()

Synatx:
int mktime ( [int hour [, int minute [, int second [, int month [, int day [, int year [, int is_dst]]]]]]] )

As you can see we can use here the date components defined in Step 1.

<?php
$targetDate = mktime($targetHour,$targetMinute,$targetSecond,$targetMonth,$targetDay,$targetYear);
?>

To get the actual date we can simply use an oyher built in PHP function time() which function returns the actual date in UNIXtimestamp format as the mktime function.

Syntax:
int time ( void )

<?php
$actualDate = time();
?>

Step 3.
Now we have both the dates so we can calculate the difference quite easy: target date - actual date. Let's make some calculation how many full days, hours, minutes is it. As the difference is in seconds we will use the following approach. A day is 24 hours, each hours has 60 minutes and each minute has 60 seconds so at the end a full day is 60*60*24 seconds. We want to get only the full days so during our calculation we will use the floor() function which returns the next lowest integer value by rounding down value if necessary. So the complete calculation process looks like this:

<?php

$secondsDiff = $targetDate - $actualDate;

$remainingDay     = floor($secondsDiff/60/60/24);
$remainingHour    = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));

?>

Step 4.
As last step we makes some formatting. In this case I will display the target date, the actual date and the remaining time. To make a nice formatting let's define a fomatting string for the date() function.

Synatx:
string date ( string format [, int timestamp] )

So the code which formats the output is the following:

<?php
// Define date format
$dateFormat = "Y-m-d H:i:s";

$targetDateDisplay = date($dateFormat,$targetDate);
$actualDateDisplay = date($dateFormat,$actualDate);
?>

And as result here is the complete PHP code:

<?php
// Define your target date here
    $targetYear   = 2007;
    $targetMonth  = 9;
    $targetDay    = 10;
    $targetHour   = 12;
    $targetMinute = 00;
    $targetSecond = 00;
// End target date definition

$targetDate = mktime($targetHour,$targetMinute,$targetSecond,$targetMonth,$targetDay,$targetYear);
$actualDate = time();

$secondsDiff = $targetDate - $actualDate;

$remainingDay     = floor($secondsDiff/60/60/24);
$remainingHour    = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));

// Define date format
$dateFormat = "Y-m-d H:i:s";

$targetDateDisplay = date($dateFormat,$targetDate);
$actualDateDisplay = date($dateFormat,$actualDate);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<body>
 TARGET DATE : <?php echo $targetDateDisplay; ?><br/><br/>
 ACTUAL DATE : <?php echo $actualDateDisplay; ?><br/><br/>
 REMAINING   : <?php echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?>
</body>