PHP Display Time Countdown using Javascript
PHP Display Time Countdown using Javascript
Published Sep 01,2022 by Kailash Singh
0 Comment 2100 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
Click to Join
