PHP SQL PROJECTS SOURCE CODE QUIZZES POST QUERY MORE

PHP

SQL

PROJECTS

SOURCE CODE

QUIZZES

POST QUERY

LOG IN

Why Log In?

PHP Display Time Countdown using Javascript

Published Sep 01,2022 by Kailash Singh

0 Comment 1761 Views

In this tutorial, we are going to teach you php display time countdown using javascript. You will learn php countdown digital clock in javascript.

This article will give you simple example of how to php countdown timer in javascript. We will use get simple how to create countdown timer using js and php.

Complate Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP Display Time Countdown using Javascript - Elevenstech Web Tutorials</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Poppins fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <style type="text/css">
        body{
            font-family: 'Poppins', sans-serif;
        }
        #time-counter{
            width: 410px;
            background: #0dcaf0;
            box-shadow: 0px 2px 9px 0px black;
        }
    </style>    
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12 mt-40">
                <h1 align="center">Elevenstech Web Tutorials</h1>   
                <h2 align="center">PHP Display Time Countdown using Javascript</h2>  

                <h1 id="time-counter" class="text-center mt-5 m-auto p-3 text-white"></h1>
            </div>
        </div>
    </div>

    <!-- Script -->
    <script>
        <?php 
            date_default_timezone_set("Asia/Kolkata");
            $currentDateTime = date('Y-m-d H:i:s');
            $addingFiveMinutes= strtotime($currentDateTime.' + 2 days');
            $getDateTime = date("F d, Y H:i:s", $addingFiveMinutes); 
        ?>
        var countDownDate = new Date("<?php echo "$getDateTime"; ?>").getTime();
        // Update the count down every 1 second
        var x = setInterval(function() {
            var now = new Date().getTime();
            // Find the distance between now an the count down date
            var distance = countDownDate - now;
            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            // Output the result in an element with id="counter"11
            document.getElementById("time-counter").innerHTML = days + "Day : " + hours + "h " +
            minutes + "m " + seconds + "s ";
            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("time-counter").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>

</body>
</html>