Menu
Hi there,
I’ve got the following working timer:
[CODE]<html>
<head>
<title>Javascript Stopwatch (Cumulative Events)</title>
<script type=”text/javascript”>
var flagclock = 0;
var flagstop = 1;
var stoptime = 0;
var currenttime;
var splitdate = ”;
var output;
var clock;
function startstop()
{
var startstop = document.getElementById(‘startstoptimer’);
var startdate = new Date();
var starttime = startdate.getTime();
if(flagclock==0)
{
startstop.value = ‘Stop’;
flagclock = 1;
counter(starttime);
}
else
{
startstop.value = ‘Start’;
flagclock = 0;
flagstop = 1;
splitdate = ”;
}
}
function counter(starttime)
{
output = document.getElementById(‘output’);
clock = document.getElementById(‘clock’);
currenttime = new Date();
var timediff = currenttime.getTime() – starttime;
if(flagstop == 1)
{
timediff = timediff + stoptime
}
if(flagclock == 1)
{
clock.value = formattime(timediff,”);
refresh = setTimeout(‘counter(‘ + starttime + ‘);’,10);
}
else
{
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime,roundtype)
{
if(roundtype == ’round’)
{
var ds = Math.round(rawtime/100) + ”;
}
else
{
var ds = Math.floor(rawtime/100) + ”;
}
var sec = Math.floor(rawtime/1000);
var min = Math.floor(rawtime/60000);
ds = ds.charAt(ds.length – 1);
if(min >= 60)
{
startstop();
}
sec = sec – 60 * min + ”;
if(sec.charAt(sec.length – 2) != ”)
{
sec = sec.charAt(sec.length – 2) + sec.charAt(sec.length – 1);
}
else
{
sec = 0 + sec.charAt(sec.length – 1);
}
min = min + ”;
if(min.charAt(min.length – 2) != ”)
{
min = min.charAt(min.length – 2)+min.charAt(min.length – 1);
}
else
{
min = 0 + min.charAt(min.length – 1);
}
return min + ‘:’ + sec;
}
</script>
<style type=”text/css”>
*
{
margin: 0;
padding: 0;
}
input, textarea
{
width: 100px;
font: normal 10pt verdana;
}
</style>
</head>
<body>
<input id=”clock” type=”text” value=”00:00″ style=”text-align: center;background-color:white;border:1px solid gray;font-weight:bold;font-size:14pt;” readonly><br>
<input id=”startstoptimer” type=”button” value=”Start” onClick=”startstop();” style=”font-weight:bold”><br>
</body>
</html>
All works great. At the moment I have to press the button to start the timer, but I want the timer to start automatically on page load (and keep the stop/start button to work of course, so the button has to show Stop instead of Start on page load).
Thanks