JSFiddle - React, Tailwind, and code Playground

by RXBeat

HTML

<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Timer</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

	
<body>
<!-- Timer Anzeige -->
<time>00:00:00</time>
<br>
<button id="clear">clear</button>

</body>
</html>

CSS

time {
	font-size: 19px;
	animation: glow linear 30s infinite;
	}
	@keyframes glow { 
		0% { color:grey; }
		50% { color:orange; }
		100% { color:red; } 
	}

JavaScript

/* Timer */
var time = document.getElementsByTagName('time')[0],
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    time.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();

/* Clear button */
clear.onclick = function() {
    time.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}