Dynamic countdown timer in PHP

by Posted on

Convert time to different timezones

We will be creating a countdown timer in PHP based on some DateTime column value from MySQL database. These type of timers are used mostly in bidding/auction sites where you display a countdown timer till last bid. You can also show a countdown timer to special events too like countdown till new year, deadline of project etc.

We will be using a third-party library called TimeCircles. You can download it from here. It is also included in the source files attached at the end of this tutorial.

We will be using a sample database called classicmodels, it will be included in the source files.

Start off by downloading the jQuery and TimeCircles libraries and copy the following files in your project:

  1. jquery-3.3.1.min.js
  2. Create a folder named TimeCircles and paste the following files in it:
  3. TimeCircles.css
  4. TimeCircles.js
<script src="jquery-3.3.1.min.js"></script>
<script src="TimeCircles/TimeCircles.js"></script>
<link rel="stylesheet" type="text/css" href="TimeCircles/TimeCircles.css">

Now execute your MySql query to get the datetime value to show the countdown timer:

<?php
    $connection = mysqli_connect("localhost", "root", "", "classicmodels");
    $sql = "SELECT * FROM orders WHERE orderNumber='10100'";
    $result = mysqli_query($connection, $sql);
    $row = mysqli_fetch_object($result);
?>

In this case, we are getting some delivery order time till arrival from our sample database.

Now, create a simple <div> give it a unique id attribute and give the datetime value to data-date attribute. The countdown will be displayed based on this attribute’s value.

<div data-date="<?php echo $row->requiredDate; ?>" id="count-down"></div>

The last step is to initialize the time using a simple jQuery function. Call the TimeCircles() function from this <div> object when the page is fully loaded.

<script>
    $(function () {
        $("#count-down").TimeCircles();
    });
</script>

That’s it, run your file, you will be able to see the countdown timer. Your complete code should look like this:

<script src="jquery-3.3.1.min.js"></script>
<script src="TimeCircles/TimeCircles.js"></script>
<link rel="stylesheet" type="text/css" href="TimeCircles/TimeCircles.css">

<?php
    $connection = mysqli_connect("localhost", "root", "", "classicmodels");
    $sql = "SELECT * FROM orders WHERE orderNumber='10100'";
    $result = mysqli_query($connection, $sql);
    $row = mysqli_fetch_object($result);
?>

<div data-date="<?php echo $row->requiredDate; ?>" id="count-down"></div>

<script>
    $(function () {
        $("#count-down").TimeCircles();
    });
</script>

2nd library SyoTimer

Now we need to show the countdown timer in PHP using 2nd library called SyoTimer. Its CSS and JS files can be downloaded from link below. We have created a folder where its files needs to be saved. First include these files in your <head> tag:

<script src="syotimer/jquery.syotimer.js"></script>
<link rel="stylesheet" href="syotimer/default.css">

Then creates its div where we will render the countdown timer for SyoTimer library:

<div id="simple_timer"></div>

We need to get the timestamp value in Javascript, we are receiving it in PHP from MySQL database but we need to get it in Javascript. Simplest way is to create an hidden input field and then get its value in Javascript using getElementById function:

<input type="hidden" id="timer_value" value="<?php echo $row->requiredDate; ?>">

Then in Javascript, first get its value using getElementById function. Then create a Date object using that value. And finally display the SyoTimer:

var timer_value = document.getElementById("timer_value").value;
var date = new Date(timer_value);

$('#simple_timer').syotimer({
	year: date.getFullYear(),
	month: date.getMonth() + 1,
	day: date.getDate(),
	hour: date.getHours(),
	minute: date.getMinutes(),
	seconds: date.getSeconds()
});

Run the code and now you will be able to see the 2nd countdown timer created using SyoTimer library.

3rd library PsgTimer

Same as we did for SyoTimer, we need to save its CSS and JS files in a separate folder. Then include those files in our <head> tag:

<script src="psgTimer/jquery.psgTimer.js"></script>
<link rel="stylesheet" href="psgTimer/psgTimer.css">

Then create a <div> tag where we will display the countdown timer:

<div id="psgTimer" data-label-days="Days"
    data-label-hours="Hours"
    data-label-minutes="Minutes"
    data-label-seconds="Seconds"></div>

And finally initialize that in Javascript:

new PsgTimer('#psgTimer', {
    endDateTime: date
});

Run the code and now you will be able to see the 3nd countdown timer created using PsgTimer library.

4th library ComingSoon

Now we are going to use another library for countdown timer know as ComingSoon, same as we did for previous libraries, we need to save its CSS and JS files in a separate folder. Then include those files in our <head> tag:

<script src="comingsoon/jquery.mb-comingsoon.js"></script>
<link rel="stylesheet" href="comingsoon/mb-comingsoon.css">

Create a <div> where this countdown timer will be displayed:

<div id="myCounter"></div>

And finally initialize that in our Javascript:

$('#myCounter').mbComingsoon({
	expiryDate: date,
	interval: 1000,
	speed: 500,
	localization: {
		days:"days",
		hours:"hours",
		minutes:"minutes",
		seconds:"seconds"
	},
	callBack: function () {
		console.log("ended");
	}
});

These are 4 libraries that we thought can be used in any type of website design. But if you are having issues integrating that in your project, feel free to post a comment in the comments section below. If you have any suggestion for another library, kindly let me know, I will try to add that in this tutorial too.

[wpdm_package id=’111′]

Published by adnanafzal565

6 Replies to “Dynamic countdown timer in PHP”

  1. hi,
    Your script is very well done.
    If I want to give certain minutes or seconds ( ex. 5 min countdown or 45 sec), this is possible with your script?
    Thanks

    1. Yes, you just need to add 5 minutes in the current time, like:

      <?php
      $date = ‘2020-12-9 21:12:49’;
      $currentDate = strtotime($date);
      $futureDate = $currentDate+(60*5);
      $formatDate = date(“Y-m-d H:i:s”, $futureDate);
      ?>

  2. Hello, thank you. It’s very nice.
    I can’t make it responsive!
    Can you help me?
    thanks

  3. Hello Good day! I used one of your script, the comingsoon, but i got this error
    this.end.getTime is not a function
    Wish you can help me with that, thank you

Comments are closed.