416-6.4
<html>
<head>
<title>Events demonstration</title>
<script type="text/javascript">
<!--
// Cycle button value 0,1 and increase press counter.
function press()
{
document.f.t1.value=1*document.f.t1.value+1;
if (document.f.b1.value=="0")
document.f.b1.value="1";
else
document.f.b1.value="0";
}
// Cycle button counter 0,1 using mod.
function modDemo()
{
document.f.b2.value=(1*document.f.b2.value+1)%2;
}
// Display new picture.
function newpic(p)
{
if (p==1) // New picture.
document.f.bart.src="Bart2.jpe";
else // Old picture.
document.f.bart.src="Bart1.jpe";
}
// Rotate button color.
function colorRotate()
{
var s=document.f.b3.style.backgroundColor;
if (s=="")
document.f.b3.style.backgroundColor="red";
else if (s=="red")
document.f.b3.style.backgroundColor="green";
else if (s=="green")
document.f.b3.style.backgroundColor="blue";
else if (s=="blue")
document.f.b3.style.backgroundColor="";
}
function delay()
{ for (var i=0;i<10000;i++){}}
// Increase or decrease font size in text box.
function big(x)
{ var s="";
if (x==1)
document.f.goTarHeels.style.fontSize="30pt";
else
document.f.goTarHeels.style.fontSize="10pt";
}
// Make selected button larger or smaller.
function highlight(x)
{
var sz=30; // Final size
var st=10; // Starting size
var step=1; // Increment
var mess;
if (x<0) // Will make button smaller.
{ sz=10; // Start at 30; end at 10.
st=30;
step=-1;
mess="Help is here";
}
else
{ mess="Here is what happens when you press button ";
if (x==1) mess=mess+"A\n\nCrash your computer";
else if (x==2) mess=mess+"B\n\nErase your files";
else if (x==3) mess=mess+"C\n\nLock up your keyboard";
else if (x==4) mess=mess+
"D\n\nChange your password to something random";
else if (x==5) mess=mess+"E\n\nLower your GPA by 2";
mess=mess+".";
}
document.f.ta1.value=mess;
x=Math.abs(x);
for (var i=st;i!=sz;i=i+step)
{ var inst="document.f.ba"+
x+
".style.fontSize=\""+
i+
"pt\";"
;
eval(inst);
document.f.delayCount.value=i;
delay();
}
}
-->
</script>
</head>
<body>
<form name="f" id="f" action="">
<input type="button" value="0" name="b1" style="font-size:30pt" onclick="press()">
<input type="button" value="0" name="b2" style="font-size:30pt" onclick="modDemo()">
<input type="button" value="0" name="b3" style="font-size:30pt" onclick="colorRotate()">
<input type="text" value="0" name="t1" style="font-size:30pt">
<img src="Bart1.jpe" name="bart" alt="Bart" onmouseover="newpic(1)"
onmouseout="newpic(0)">
<hr>
<input type="text" name="goTarHeels" value="Go Tar Heels" readonly="readonly" onmouseover="big(1)"
onmouseout="big(0)"/>
<hr>
<input type="button" name="ba1" value="A" onmouseover="highlight(1)" onmouseout="highlight(-1)" />
<input type="button" name="ba2" value="B" onmouseover="highlight(2)" onmouseout="highlight(-2)" />
<input type="button" name="ba3" value="C" onmouseover="highlight(3)" onmouseout="highlight(-3)" />
<input type="button" name="ba4" value="D" onmouseover="highlight(4)" onmouseout="highlight(-4)" />
<input type="button" name="ba5" value="E" onmouseover="highlight(5)" onmouseout="highlight(-5)" />
<br>
<textarea name="ta1" rows="5" cols="25" >Help is here</textarea>
<input type="text" name="delayCount">
</form>
</body>
</html>