PHP Countdown Timer

In this post, you will learn how to create a countdown timer using the PHP programming language.

A Countdown Timer can be defined as a virtual clock that counts down in seconds, minutes, hours, and days to any date, with time zone support. There is more benefit from using a countdown timer. The upcoming event time can be displayed on the website with the help of a countdown timer. The countdown timer is very useful and beneficial for online businesses, especially when it comes to new product launches.

Here, we can create a dynamic countdown timer using PHP and JavaScript. The strtotime() function is a built-in function in PHP. The strtotime() function accepts a date/time string, with textual date/time values and parses it as an Unix timestamp.

HTML Code


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Creating Dynamic Countdown</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style type="text/css">
        #counter{
            width: 400px;
            background: #FF3131;
            box-shadow: 0px 2px 4px 0px black;
        }
    </style>    
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12 mt-40">
		<h1>Countdown Timer</h1>     
		<h2 id="counter" class="text-center"></h2>
            </div>
        </div>
    </div>
</body>
</html>

PHP Code

<?php 
 $dateTime = strtotime('March 15, 2023 18:00:00');
 $getDateTime = date("F d, Y H:i:s", $dateTime); 
?>

JavaScript Code

<!-- Script -->
    <script>
        var countDownTimer = new Date("<?php echo "$getDateTime"; ?>").getTime();
        // Update the count down every 1 second
        var interval = setInterval(function() {
            var current = new Date().getTime();
            // Find the difference between current and the count down date
            var diff = countDownTimer - current;
            // Countdown Time calculation for days, hours, minutes and seconds
            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById("counter").innerHTML = days + "Day : " + hours + "h " +
            minutes + "m " + seconds + "s ";
            // Display Expired, if the count down is over
            if (diff < 0) {
                clearInterval(interval);
                document.getElementById("counter").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>

Complete code: PHP Countdown Timer

Here, we have merged all the above code, so this is the complete code of PHP countdown timer.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Creating Dynamic Countdown</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style type="text/css">
        #counter{
            width: 400px;
            background: #FF3131;
            box-shadow: 0px 2px 4px 0px black;
        }
    </style>    
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12 mt-40">
		<h1>Countdown Timer</h1>     
		<h2 id="counter" class="text-center"></h2>
            </div>
        </div>
    </div>
<?php 
 $dateTime = strtotime('March 15, 2023 18:00:00');
 $getDateTime = date("F d, Y H:i:s", $dateTime); 
?>
<!-- Script -->
<script>
        var countDownTimer = new Date("<?php echo "$getDateTime"; ?>").getTime();
        // Update the count down every 1 second
        var interval = setInterval(function() {
            var current = new Date().getTime();
            // Find the difference between current and the count down date
            var diff = countDownTimer - current;
            // Countdown Time calculation for days, hours, minutes and seconds
            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById("counter").innerHTML = days + "Day : " + hours + "h " +
            minutes + "m " + seconds + "s ";
            // Display Expired, if the count down is over
            if (diff < 0) {
                clearInterval(interval);
                document.getElementById("counter").innerHTML = "EXPIRED";
            }
        }, 1000);
</script>
</body>
</html>

Sum of array in PHP
Check if value exists in array PHP
Perfect number program in PHP
Fibonacci series using while loop
PHP reverse a string without predefined function
PHP random quote generator
PHP convert string into an array
PHP remove HTML and PHP tags from string
Import Excel File into MySQL using PHP
PHP array length
Import Excel File into MySQL Database using PHP
PHP String Contains
PHP remove last character from string
PHP calculate percentage of total
PHP sanitize input for MySQL
Display PDF using an AJAX call
How to fetch data from database in php and display in pdf
How to read CSV file in PHP and store in MySQL
How to create a doc file using PHP
PHP SplFileObject Examples
How to Upload a File in PHP
Sending HTML form data to an email address