makotom/countdown.html

## countdown.html
<!doctype html>
<meta charset="UTF-8">
<title>Numbers</title>

<style>
#countbox{
	font-size: 400px;
	text-align: center;
}
#countbar{
	width: 0;
	height: 32px;
	background-color: #5f8;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function(){
	"use strict";

	var WAIT = 30, MUSIC = ["1.wav", "2.wav"],

	countBox = document.getElementById("countbox"),
	countBar = document.getElementById("countbar"),

	startCountDown = function(){
		var i = WAIT * 100,

		refreshCounter = function(){
			countBox.updateDOMText(Math.ceil(i / 100).toString());
			countBox.style.color = Math.ceil(i / 100) < 10 ? "red" : "blue";
			countBar.style.width = (i / WAIT).toString() +  "%";

			i -= 1;
		},

		audio = document.createElement("audio"),

		timerInst = setInterval(function(){
			refreshCounter();

			if(i === 0){
				clearInterval(timerInst);
				setTimeout(function(){
					countBox.updateDOMText("");
					countBar.style.width = "0";
					audio.parentElement.removeChild(audio);
					document.documentElement.addEventListener("click", startCountDown);
				}, 10);
			}
		}, 10);

		audio.setAttribute("src", MUSIC[Math.floor(MUSIC.length * Math.random())]);
		audio.setAttribute("autoplay", "true");
		audio.setAttribute("loop", "true");
		document.documentElement.appendChild(audio);

		document.documentElement.removeEventListener("click", startCountDown);
	};

	HTMLDivElement.prototype.updateDOMText = function(strToWrite){
		while(this.firstChild){
			this.removeChild(this.firstChild);
		}
		this.appendChild(document.createTextNode(strToWrite));
	};

	document.documentElement.addEventListener("click", startCountDown);

	return;
}, false);
</script>

<div id="countbox"></div>
<div id="countbar"></div>
	<!doctype html>
	<meta charset="UTF-8">
	<title>Numbers</title>

	<style>
	#countbox{
	font-size: 400px;
	text-align: center;
	}
	#countbar{
	width: 0;
	height: 32px;
	background-color: #5f8;
	}
	</style>

	<script>
	window.addEventListener("DOMContentLoaded", function(){
	"use strict";

	var WAIT = 30, MUSIC = ["1.wav", "2.wav"],

	countBox = document.getElementById("countbox"),
	countBar = document.getElementById("countbar"),

	startCountDown = function(){
	var i = WAIT * 100,

	refreshCounter = function(){
	countBox.updateDOMText(Math.ceil(i / 100).toString());
	countBox.style.color = Math.ceil(i / 100) < 10 ? "red" : "blue";
	countBar.style.width = (i / WAIT).toString() + "%";

	i -= 1;
	},

	audio = document.createElement("audio"),

	timerInst = setInterval(function(){
	refreshCounter();

	if(i === 0){
	clearInterval(timerInst);
	setTimeout(function(){
	countBox.updateDOMText("");
	countBar.style.width = "0";
	audio.parentElement.removeChild(audio);
	document.documentElement.addEventListener("click", startCountDown);
	}, 10);
	}
	}, 10);

	audio.setAttribute("src", MUSIC[Math.floor(MUSIC.length * Math.random())]);
	audio.setAttribute("autoplay", "true");
	audio.setAttribute("loop", "true");
	document.documentElement.appendChild(audio);

	document.documentElement.removeEventListener("click", startCountDown);
	};

	HTMLDivElement.prototype.updateDOMText = function(strToWrite){
	while(this.firstChild){
	this.removeChild(this.firstChild);
	}
	this.appendChild(document.createTextNode(strToWrite));
	};

	document.documentElement.addEventListener("click", startCountDown);

	return;
	}, false);
	</script>

	<div id="countbox"></div>
	<div id="countbar"></div>