Untitled

posted: May, 8th 2009 | jump to bottom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>My personal study timer</title>
</head>
<body onload='document.getElementById("start").focus()'>
 
<style>
h1, h3 {
	text-align: center;
}
h1, h2, h3, td {
	font-familY: sans-serif;
}
td {
	padding: 30px;
}
</style>
 
<h1>My study timer</h1>
 
<h3>Hit the space bar to start</h3>
 
<script>
var ChessClock = function (player) {
	this.player = player;
	this.seconds = 0;
	this.on = 0;
 
	this.start = function () {
		this.on = 1;
		document.getElementById(this.player+'_td').style.backgroundColor = 'green';
	};
 
	this.stop = function () {
		this.on = 0;
		document.getElementById(this.player+'_td').style.backgroundColor = 'white';
	}
 
}
 
ChessClock.prototype.tick = function () {
	if (this.on) {
		var i = document.getElementById(this.player);
		i.value = toTime(++this.seconds);	
	}
};
 
var timeout;
var player1 = new ChessClock('clock1');
var player2 = new ChessClock('clock2');
 
function tick() {
	clearTimeout(timeout);
	timeout = setTimeout(tick, 1000);
 
	player1.tick();
	player2.tick();
}
 
function start() {
 
	if (!player1.on) {
		player1.start();
		player2.stop();
	} else {
		player2.start();
		player1.stop();
	}
 
	tick();
 
	document.getElementById('reset').style.display='';
}
 
function reset() {
	clearTimeout(timeout);
	player1.stop();
	player2.stop();
	player1.seconds = 0;
	player2.seconds = 0;
 
	document.getElementById('clock1').value=0;
	document.getElementById('clock2').value=0;	
 
	document.getElementById('reset').style.display='none';
	document.getElementById('start').innerHTML = 'Start';
}
 
 
function toTime (secs) {
	//minutes
	var hours = Math.floor(secs/3600);
	var min = Math.floor((secs-hours*3600)/60);
	var secs = secs - (min*60);
 
	return hours + (min<10?':0':':')+min +(secs<10?':0':':') + secs;
}
</script>
 
<table width='100%'>
	<tr>
		<td width='50%' align='center' id='clock1_td'>
			<h2>Study</h2>
			<input id='clock1' value='0' size='4' style='font-size: 42pt' />
		</td>
		<td align='center' id='clock2_td'>
 
			<h2>Rest</h2>
			<input id='clock2' value='0' size='4' style='font-size: 42pt' />
		</td>
	</tr>
</table>
 
 
<div style='text-align: center; margin: 30px;'>
	<span style='display: none; float: right' id='reset'>
		<button style='font-size: 22pt;' onclick='if (confirm("Are you sure you want to reset?")) reset();'>Reset</button>
 
	</span>
 
	<button style='font-size: 22pt' id='start' onclick='start(); this.innerHTML="Switch"'>Start</button>
</div>
 
<div style='width: 730px; margin: 20px auto'>
<script type="text/javascript"><!--
google_ad_client = "pub-2770200339923945";
/* 728x90, created 6/1/08 */
google_ad_slot = "7422272173";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
]</div>
 
 
 
</body>
 
</html>
jump to top
187 views
plaintext | download | |
The Easiest Way to Save and Share Code Snippets on the web

abap
