leekspin/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>LEEKSPIN</title>
	<style>
		html,body,video {
			width: 100%;
			line-height:1.5em;
			height: calc( 100% - 1em );
			margin:0;
			background-color:black;
		}
		video {
			transform: scale(1.5);
		}
	</style>
	<script>
		var time
		var output
		function Init(){
			time = 1;
			StartTimer()
		}
		function convertOutput(){
			var hours = 0
			var mins = 0
			var secs = time
			while(secs >= 60){
				secs -= 60;
				mins += 1;
			}
			if(secs < 10){
				secs = "0" + secs;
			}
			while(mins >= 60){
				mins -= 60;
				hours += 1;
			}
			if(mins < 10){
				mins = "0" + mins;
			}
			output = hours + ":" + mins + ":" + secs;
		}
		function StartTimer(){
			time += 1;
			convertOutput();
			document.getElementById("time").innerHTML = output;
			self.setTimeout("StartTimer()", 1000);
		}
	</script>
</head>
<body>
	<video width="100%" height="100%" loop="loop" autoplay="autoplay" controls="false">
		<source src="loituma.webm" type="video/webm">
	</video>
	<div style="text-align:center; color:white; font-size:14pt; font-weight:bold">
		You've been spinning for <span id="time">00:00:00</span>.
	</div>
	<script>Init()</script>
</body>
</html>