How to Create Dynamic Countdown in PHP MySQL?
Apr 09, 2022 . Admin
Hello dev,
I am going to explain to you how to create a countdown timer using JS, PHP, and MySQL. You will learn JS timer countdown digital clock using PHP MySQL.
This article will give you a simple example of how to PHP countdown timer using Javascript and MySQL. We will use get simple how to create a dynamic countdown in JS and PHP Example.
I will give you a simple example of how to time countdown using PHP MySQL.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Creating Dynamic Countdown in PHP Example - Mywebtuts.com</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 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;
}
#counter{
width: 410px;
background: #ff190b;
box-shadow: 0px 2px 9px 0px black;
}
</style>
</head>
<body>
<?php
// Database Connection
$mysqli = mysqli_connect('localhost','root','','demos');
$result = mysqli_query($mysqli, "SELECT * FROM count ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
$date = $res['date'];
$time = $res['time'];
}
?>
<div class="container mt-5">
<div class="row">
<div class="col-md-12 mt-40">
<div class="card" style="height: 400px;">
<div class="card-header text-white text-center" style="background: #343a40;">
<h2>How to Creating Dynamic Countdown in PHP Example - Mywebtuts.com</h2>
</div>
<div class="card-body pt-5">
<h1 id="counter" class="text-center mt-5 m-auto p-3 text-white"></h1>
</div>
</div>
</div>
</div>
</div>
<!-- Script -->
<script>
<?php
$data = strtotime($date);
$getDate = date("F d, Y", $data);
?>
var countDownDate = new Date("<?php echo "$getDate $time"; ?>").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("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("counter").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Output:
It will help you...