PHP Display Time Countdown using Javascript

Kailash Singh

PHP Display Time Countdown using Javascript

Published Sep 01,2022 by Kailash Singh

0 Comment     1922 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>  

 


Comments ( 0 )


SEARCH POST HERE


Support Us

Subscribe My YouTube Channel

Join Our Telegram Channel & Support Eachother

CATEGORIES

INTERVIEW QUESTIONS

PROJECT SOURCE CODE






POPULAR POSTS