Menu
Hi people,
I’ve got a site with a counter. The visitor starts the counter, and can stop it or stop it and start it faster or slower.
It’s easier to show than to explain . . . the counters are down at the bottom of the center column at the following link.
[URL=http://www.dcameraman.com/modules.php?name=Chance_Or_Not&table=small]My link
What I want to happen:
Situation 1: the visitor starts the counter by clicking either the fast or slow button. When the table on the left of the buttons matches the table on the right, the number that is in the counter stops and stays visible in the texbox. When the visitor clicks either the fast or slow button, the counter starts from 0 and increases.
Situation 2: the visitor starts the counter by clicking either the fast or slow button. They hit the stop button. They hit either the fast or slow button. I want the counter to keep increasing.
Here is the code for one of the tables by itself:
[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script language=”JavaScript” type=”text/javascript”>
var mastercounter=0;
function blah(){
var oneone=(Math.round(Math.random()));
var onetwo=(Math.round(Math.random()));
var twoone=(Math.round(Math.random()));
var twotwo=(Math.round(Math.random()));
if(oneone==0){document.getElementById(‘oneone’).bgColor= ‘838383’}
else
{document.getElementById(‘oneone’).bgColor= ‘124680’};
if(onetwo==0){document.getElementById(‘onetwo’).bgColor= ‘838383’}
else
{document.getElementById(‘onetwo’).bgColor= ‘124680’};
if(twoone==0){document.getElementById(‘twoone’).bgColor= ‘838383’}
else
{document.getElementById(‘twoone’).bgColor= ‘124680’};
if(twotwo==0){document.getElementById(‘twotwo’).bgColor= ‘838383’}
else
{document.getElementById(‘twotwo’).bgColor= ‘124680’};
if(oneone==0 && onetwo==0 && twoone==0 && twotwo==0){
stoprepeat=clearInterval(repeat);
document.getElementById(‘startbutton1’).disabled=false;
document.getElementById(‘startbutton2’).disabled=false;
var x = true;
}
function number_format(n) {
//create an array with 1 element: ‘0’
var arr=new Array(‘0’);
//create a variable ‘z’ and assign it 0 (zero)
z=0;
//while ‘n’ is greater than 0 (zero)
while (n>0){
//array element[z] = ” (empty string) + the returned value (modulus)
// of n divided by 1000
arr[z]=”+n%1000;
//set n to the nearest integer less than or equal to n/1000
n=Math.floor(n/1000);
//increment z
z++;
}
//reverse the array
arr=arr.reverse();
//loop through the array using z as a counter
for (var z in arr)
//if z is greater than 0 (zero)
if (z>0) //padding zeros
//while the length of array element[z] is less than 3
while (arr[z].length<3)
//array element[z] = ‘0’ (zero) + the value of array element[z]
arr[z]=’0’+arr[z];
//join the array elements into a string and return that to the caller
return arr.join();
}
document.getElementById(‘mastercounter’).value=number_format(mastercounter);
mastercounter++;
}
</script>
<style type=”text/css”>
<!–
.layer1 {
position: absolute;
height: 200px;
width: 200px;
left: 0px;
top: 0px;
}
.fast {
position: absolute;
height: 25px;
width: 50px;
left: 0px;
top: 20px;
}
.slow {
position: absolute;
height: 25px;
width: 50px;
left: 0px;
top: 55px;
}
.stop {
position: absolute;
height: 25px;
width: 50px;
left: 2px;
top: 92px;
}
.table4 {
position: absolute;
left: 60px;
top: 18px;
height: 100px;
width: 100px;
}
.submit {
position: absolute;
left: 10px;
top: 160px;
}
.mastercounter {
position: absolute;
left: 10px;
top: 180px;
}
–>
</style>
<script language=”JavaScript” type=”text/JavaScript”>
<!–
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//–>
</script>
</head>
<body onLoad=”blah();”>
<div class=”layer1″>
<form name=”form1″ id=”form1″>
<input class=”fast” name=”button” type=”button” id=”startbutton1″ value=”Fast” onClick=”blah(); repeat=setInterval(‘blah();’, 10); document.getElementById(‘startbutton1’).disabled=true; document.getElementById(‘startbutton2’).disabled=true; if(x=true){var mastercounter=0}; x=false;”>
<br>
<input class=”slow” name=”button2″ type=”button” id=”startbutton2″ value=”Slow” onClick=”blah(); repeat=setInterval(‘blah();’, 1000); document.getElementById(‘startbutton1’).disabled=true; document.getElementById(‘startbutton2’).disabled=true; if(x=true){var mastercounter=0}; x=false;”>
<br>
<input class=”stop” name=”button3″ type=”button” value=”Stop” onClick=”stoprepeat=clearInterval(repeat); document.getElementById(‘startbutton1’).disabled=false; document.getElementById(‘startbutton2’).disabled=false;”>
<br>
<input type=”text” name=”mastercounter” class=”mastercounter” id=”mastercounter”>
<input type=”submit” name=”pushme” class=”submit” value=”Submit”>
</form>
<table class=”table4″>
<tr>
<td id=”oneone”> </td>
<td id=”onetwo”> </td>
</tr>
<tr>
<td id=”twoone”> </td>
<td id=”twotwo”> </td>
</tr>
</table><br>
</div>
</body>
</html>
Thanks for any help I can get. I know that’s a lot of code to wade through.
Josh