JSFiddle - React, Tailwind, and code Playground

by Pegleg3941

HTML

<p>Timer countdown: <span id="countdown">00:00:00 (0)</span></p>

JavaScript

// Starting variables.
var seconds = 60;
var shortCounter = 0;
var countdown, start, stop = false;

function startCountdown() {
	start = new Date();

	// Left-pad digits for a time display.
	function padl(t) {
		return (t.toString().length == 1) ? "0"+t : t;
	}

	// Show HH:MM:SS.
	function render(elapsed) {
		var hours = parseInt(elapsed / 60 / 60) % 60;
		var minutes = parseInt(elapsed / 60) % 60;
		var seconds = elapsed % 60;

		return padl(hours)+':'+padl(minutes)+':'+padl(seconds);
	}

	// Create the long timer. The +50 is so that our short timer will fire the correct number
	// of times, if uninterrupted.
	setTimeout(function() {
		var elem = document.getElementById('countdown');
		var display = 'Complete @ '+(elem.textContent ? elem.textContent : elem.innerText)+'!';

        if (elem.textContent) {
			elem.textContent = display;
		} else {
			elem.innerText = display;
		}
		stop = true;
	}, (seconds * 1000) + 50);

	// Create the short counter to show our progress
	countdown = setInterval(function() {
		if (stop) {
			// Stop counting once the long timer fires.
			clearInterval(countdown);
		} else {
			// Update the counter.
			var current = new Date();
			var elem = document.getElementById('countdown');
			var time = parseInt((current.getTime() - start.getTime()) / 1000);
			var display = render(time)+' ('+(++shortCounter)+')';

			if (console && console.log) {
				console.log(start.toLocaleTimeString()+' => '+current.toLocaleTimeString()+' ('+shortCounter+')');
			}

			if (elem.textContent) {
				elem.textContent = display;
			} else {
				elem.innerText = display;
			}
		}
	}, 1000);
}

startCountdown();