PDA

View Full Version : Stopwatch Problem

Andorphin
10-18-2007, 02:36 PM
Hey I ave a stopwatch javascript file as below, but I want the clock to turn red when it hits a certain number, the clock is a read only text field called 'clock'.

ths code



var flagclock = 0;
var flagstop = 0;
var stoptime = 0;

var currenttime;


var clock;

function startstop()
{
var startstop = document.getElementById('startstopbutton');
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)
{
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 + ':' + ds;
}

function resetclock()
{
flagstop = 0;
stoptime = 0;
splitdate = '';
window.clearTimeout(refresh);
if(flagclock == 1)
{
var resetdate = new Date();
var resettime = resetdate.getTime();
counter(resettime);
}
else
{
clock.value = "00:00:0";
}
if (clock.value=="15:00:0")
{
clock.color=red
}
}




Can anyone see what I ahve done wrong??
Thanks
Andorphin
10-18-2007, 02:37 PM
PS. please ignore the split date variables mentioned they have been removed and I missed the two still in it, but they don't affect it in anyway.
coothead
10-19-2007, 06:15 AM
Hi there Andorphin,

do you mean something like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.red {
color:#f00;
}
</style>

<script type="text/javascript">
var flagclock=0;
var flagstop=0;
var stoptime=0;
var currenttime;
var clock;

/************** edit this value **************/

var color_red_value='00:10:0';

/*********************************************/

window.onload=function () {
document.getElementById('startstopbutton').onclick=function() {
startstop();
}
}
function startstop(){
if(clock) {
clock.className='';
}
var startstop=document.getElementById('startstopbutton');

startdate=new Date();
starttime=startdate.getTime();
if(flagclock==0){
startstop.value='Stop';
flagclock=1;
counter(starttime);
}
else {
startstop.value='Start';
flagclock=0;
flagstop=1;
splitdate='';resetclock()
}
}
function counter(starttime){
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;
}
if(clock.value==color_red_value) {
clock.className='red';
}
}
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+':'+ds;
}

function resetclock() {
flagstop=0;
stoptime=0;
splitdate='';
window.clearTimeout(refresh);
if(flagclock==1) {
var resetdate=new Date();
var resettime=resetdate.getTime();
counter(resettime);
}
else {
clock.value='00:00:0';
}
}
</script>

</head>
<body>

<form action="#">
<div>
<input id="clock" type="text" value="00:00:0">
<input id="startstopbutton" type="button" value="Start" >
</div>
</form>

</body>
</html>
Andorphin
10-19-2007, 06:51 PM
That works fantastic....Thank you, you're a gem!
coothead
10-19-2007, 07:41 PM
No problem, you're very welcome. :agree:
Andorphin
10-20-2007, 02:07 PM
Hey Coothead one thing I have noticed is that the window.onload function is interfering with my onload function in the body tag of my site, it's nothing major but my code is this.

<body onload="content.innerHTML=Home">

this should load the main part of my page into place since inserting the js file above I now have to click on the Home link to bring it up, so everything still works, except the bod onload.

Any ideas as to how to get round this?
coothead
10-20-2007, 02:26 PM
Hi there Andorphin,

remove the highlighted attribute here...
<body onload="content.innerHTML=Home">
...and add the highlighted line here...
window.onload=function () {
document.getElementById('startstopbutton').onclick=function() {
startstop();
content.innerHTML=Home;
}
}
BillyGalbreath
10-20-2007, 02:26 PM
Remove the onLoad from the body tag and place its contents inside the onload function like so:

window.onload=function () {
content.innerHTML=Home;
document.getElementById('startstopbutton').onclick=function() {
startstop();
}
}
BillyGalbreath
10-20-2007, 02:27 PM
Hi there Andorphin,

remove the highlighted attribute here...
<body onload="content.innerHTML=Home">
...and add the highlighted line here...
window.onload=function () {
document.getElementById('startstopbutton').onclick=function() {
startstop();
content.innerHTML=Home;
}
}

haha! beat me by like 10 seconds! :P
coothead
10-20-2007, 02:28 PM
Hi there Billy,

no, that was a dead heat. :D
Andorphin
10-20-2007, 02:44 PM
Sweet! I kept puting it before the {}, thanks again, to both.
chaos_defined
08-29-2008, 04:30 PM
Ok, I know this thread is old, but, does anyone know how the above code can be redefined to have a start, stop, and reset button as well as have it record to say a table showing 3 columns?

Or, does anyone know how i can do something like this in flash for an intranet site?