JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<title>Titel</title>
<meta charset="ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<script language="javascript" type="text/javascript">
<!--
/*author Philip M. 2010*/ /*http://www.codingforums.com/showthread.php?t=201784*/
var timeInSecs;
var ticker;
function startTimer(secs){
timeInSecs = parseInt(secs)-1;
ticker = setInterval("tick()",1000); // every second
}
function tick(){
var secs = timeInSecs;
if (secs>0){
timeInSecs--;
}
else{
clearInterval(ticker); // stop counting at zero
// startTimer(60); // remove forward slashes in front of startTimer to repeat if required
}
document.getElementById("countdown").innerHTML = secs +" sec";
document.getElementById("countdown_bar").style.width = secs+"%";
if(secs <= (30 /*'.$time.'*/ / 3) ){
document.getElementById("countdown_bar").style.background = "#130808";
}
if(secs <= 0){
page_reload();
}
}
startTimer(30 /*'.$time.'*/); // 60 seconds
function stop_refresh(){
if(ticker){
clearInterval(ticker); // stop counting
document.getElementById("countdown").innerHTML = "stopped";
}
}
//-->
</script>
<style type="text/css">
<!--
body{
background: #000000;
}
.countdown_bar{
transition:background 3s ease-in-out, width 1s ease-in-out;
-moz-transition:background 3s ease-in-out, width 1s ease-in-out;
-webkit-transition:background 3s ease-in-out, width 1s ease-in-out;
-o-transition:background 3s ease-in-out, width 1s ease-in-out;
border-radius: 3px;
min-height:16px;background:#0E1207;
...