Simple timer with javascript

Posted: June 19, 2012 in HTML, Javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>~VJ Timer~</title>
<style>
h1{ color:#4BB7B7; font-size:50px;}
a{ color:#09F; font-size:35px; text-decoration:none;}
</style>
</head>

<body>
<!-- Created by Vibha Jadwani -->
<!-- Copyright © 2012 Vibha -->

<h1 style="text-align:center; margin-top:270px;"  id="time">&nbsp;</h1>

<div style="float:left; margin-left:680px; margin-bottom:30px;">
<a id="start" href="#" onclick="toogleTimer();" >Play</a> 
</div>

<div style="float:left; margin-left:680px;">
<a id="stop" href="#" onclick="stopTimer();" >Stop</a> 
</div>


<script language="javascript">
if(getCookie('c_timer')=='on')
{
	document.getElementById('start').innerHTML = 'Pause';
	document.getElementById('stop').style.display = 'block';
	startTicker();
}
else
{
	document.getElementById('stop').style.display = 'none';
}
function startTicker()
{
	if(!getCookie('startTimestamp'))
	{
		var d = new Date();
		setCookie('startTimestamp',Math.round(d.getTime()/1000),1);
		setCookie('c_timer','on',1);
		document.getElementById('stop').style.display = 'block';
	}
	var d = new Date();
	var currentTimestamp = Math.round(d.getTime()/1000);
	
	var breakTime = getCookie('breakTime');
	if(breakTime > 0)
	{
		var diff = parseInt(currentTimestamp)-parseInt(breakTime);
		setCookie('startTimestamp',parseInt(getCookie('startTimestamp'))+parseInt(diff),1);	
		setCookie('breakTime',0,1);	
	}
	oneTick();
}
function stopTicker()
{
	var d = new Date();
	setCookie('breakTime',Math.round(d.getTime()/1000),1);
	clearTimeout(tickTimer);	
}
function stopTimer()
{
	setCookie('startTimestamp','',1);
	setCookie('name','',1);
	setCookie('c_timer','',1);
	clearTimeout(tickTimer);
	document.getElementById('start').innerHTML = 'Play';
	document.getElementById('time').innerHTML = '';
	document.getElementById('stop').style.display = 'none';
}
function oneTick()
{
	var d = new Date();
	var currentTimestamp = Math.round(d.getTime()/1000);
	var startTimestamp = getCookie('startTimestamp');
	
	var diff = parseInt(currentTimestamp)-parseInt(startTimestamp);
	document.getElementById('time').innerHTML = timestampToTime(diff);
	
	tickTimer = setTimeout('oneTick()',1000);
}
function toogleTimer()
{
	if(document.getElementById('start').innerHTML=='Play')
	{
		startTicker();
		document.getElementById('start').innerHTML = 'Pause';
	}
	else
	{
		stopTicker();
		document.getElementById('start').innerHTML = 'Play';
	}
}
function timestampToTime(time)
{
	var hour = Math.floor(time/3600);
	var min = Math.floor((time%3600)/60);
	var sec = (time%3600)%60;
	return padDigit(hour)+' : '+padDigit(min)+' : '+padDigit(sec);
}
function padDigit(number) 
{
   return (number < 10 ? '0' : '') + number;
}
function setCookie(c_name,value,exdays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
	var i,x,y,ARRcookies=document.cookie.split(";");
	for (i=0;i<ARRcookies.length;i++)
	{
	  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
	  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
	  x=x.replace(/^\s+|\s+$/g,"");
	  if (x==c_name)
	  {
		return unescape(y);
	}
	 }
} 
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s