You can use JS. JS (Java scripts) helps in the countdown clock timer to set seconds with HTML. Create a function "function countDown" between script tags and define the countdown clock timer seconds. You can set a countdown clock timer for any seconds.
Like -
A countdown clock timer for 30 seconds
A countdown clock timer for 10 seconds
Countdown clock timer for 1 minute
A countdown clock timer for 1 hr
Use the JS scripts below to run a countdown timer for 30 seconds.
<script>
function countDown(secs,elem) {
var element = document.getElementById(elem);
element.innerHTML = "Timer: "+secs+" seconds";
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = '<h2>Ended</h2>';
element.innerHTML += '<a href=" ">Reset</a>';
}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"style="font-size:30px;"></div>
<script>countDown(30,"status");</script>
It's a better way to use CSS with a countdown timer in JS. You can design it with any design by CSS. After a completed the time, you can reset the countdown clock timer again for 30 seconds.
Set any seconds in this line of countdown clock timer in Javascript.
<script>countDown(30,"status");</script>
You can use a PHP script to change this countdown timer seconds. Insert value in the MYSQL database and fetch (retrieve ) using PHP and MYSQL database.
Save that value in a PHP variable.
Use the PHP variable in the line below.
<script>countDown(30,"status");</script>