按鈕改變顏色

 

 

按鈕改變方式

<form>
<p align="center"><font color="#008000">請按下按鈕即可改變背景色顏色</font></p>
<p align="center"><input type="button" value="改變顏色"
onclick="randombackground()"> </p>
</form>

手動選擇改變方式

<form name="backcolorform">
<p align="center">手動選擇顏色.</p>
<div align="center"><center><table border="0">
<tr>
<td><input type="radio" name="color" value="green"
onclick="backcolor(this.form)">Green</td>
<td><input type="radio" name="color" value="aqua"
onclick="backcolor(this.form)">Aqua</td>
<td><input type="radio" name="color" value="red"
onclick="backcolor(this.form)">Red</td>
<td><input type="radio" name="color" value="olive"
onclick="backcolor(this.form)">Olive</td>
</tr>
<tr>
<td><input type="radio" name="color" value="teal"
onclick="backcolor(this.form)">Teal</td>
<td><input type="radio" name="color" value="blue"
onclick="backcolor(this.form)">Blue</td>
<td><input type="radio" name="color" value="maroon"
onclick="backcolor(this.form)">Maroon</td>
<td><input type="radio" name="color" value="navy"
onclick="backcolor(this.form)">Navy</td>
</tr>
<tr>
<td><input type="radio" name="color" value="gray"
onclick="backcolor(this.form)">Gray</td>
<td><input type="radio" name="color" value="lime"
onclick="backcolor(this.form)">Lime</td>
<td><input type="radio" name="color" value="fuschia"
onclick="backcolor(this.form)">Fuschia</td>
<td><input type="radio" name="color" value="white"
onclick="backcolor(this.form)">White</td>
</tr>
<tr>
<td><input type="radio" name="color" value="purple"
onclick="backcolor(this.form)">Purple</td>
<td><input type="radio" name="color" value="silver"
onclick="backcolor(this.form)">Silver</td>
<td><input type="radio" name="color" value="yellow"
onclick="backcolor(this.form)">Yellow</td>
<td><input type="radio" name="color" value="black"
onclick="backcolor(this.form)">Black</td>
</tr>
</table>
</center></div>
</form>

移動滑鼠改變方式

<a href="16.html"
onmouseover="randombackground()">移動滑鼠接近本行文字即可改變背景顏色!</a>

最後要加入Javascript控制碼內容:

<script language="Javascript">

<!--





function backcolor(form){

temp = ""

for (var i = 0; i < 16; i++) {

temp = form.color[i].value

if (form.color[i].checked){ document.bgColor = temp }

}

}



function randombackground(){



document.bgColor = getColor()



}



function getColor(){



currentdate = new Date()

backgroundcolor = currentdate.getSeconds()



if (backgroundcolor > 44)

backgroundcolor = backgroundcolor - 45

else if (backgroundcolor > 29)

backgroundcolor = backgroundcolor - 30

else if (backgroundcolor > 15)

backgroundcolor = backgroundcolor - 16



if (backgroundcolor == 0 )

return "olive";

else if (backgroundcolor == 1 )

return "teal";

else if (backgroundcolor == 2 )

return "red";

else if (backgroundcolor == 3 )

return "blue";

else if (backgroundcolor == 4 )

return "maroon";

else if (backgroundcolor == 5 )

return "navy";

else if (backgroundcolor == 6 )

return "lime";

else if (backgroundcolor == 7 )

return "fuschia";

else if (backgroundcolor == 8 )

return "green";

else if (backgroundcolor == 9 )

return "purple";

else if (backgroundcolor == 10 )

return "gray";

else if (backgroundcolor == 11 )

return "yellow";

else if (backgroundcolor == 12 )

return "aqua";

else if (backgroundcolor == 13 )

return "black";

else if (backgroundcolor == 14 )

return "white";

else if (backgroundcolor == 15 )

return "silver";

}



// -->

</script>

HOME