熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js點擊更換背景顏色或圖片的實例代碼

2013-11-15 11:53:12  來源: JSP教程 

  按鈕樣式

復制代碼 代碼如下:
<script>
org_Color=documentbgColorsubstring()
</script>
<form>
<input type="button" value="淡黃色背景"onClick="documentbgColor=#feffc">
<input type="button" value="淺藍色背景"onClick="documentbgColor=#cfffe">
<input type="button" value="粉紅色背景"onClick="documentbgColor=#ffcc">
<input type="button" value="墨綠色背景"onClick="documentbgColor=#bd">
<input type="button" value="天藍色背景"onClick="documentbgColor=#BCFF">
<input type="button" value="米白色背景"onClick="documentbgColor=#fff">
</form>

  
下拉樣式

復制代碼 代碼如下:
<selectonChange="documentbgColor=thisoptions[thisselectedIndex]value">
<option value="#CCC">灰色的
<option value="BLACK">黑的色
<option value="dcff">淡紫藍
<option value="feefc">太陽黃
<option value="ffdc">淡紅橘
<option value="cfed">蘋果綠
<option value="ff">草原綠
<option value="#CBC">橄榄色
<option value="#BCFF">天空藍
<option value="#AEDFD">藍綠色
<option value="#BD">墨綠色
<option value="#FFF">米白色
</select>

  
觸碰樣式

復制代碼 代碼如下:
<scriptlanguage="Javascript">
<!
function backcolor(form){
temp = ""
for (var i = ; i < ; i++) {
temp = formcolor[i]value
if (formcolor[i]checked){ documentbgColor = temp }
}
}

  function randombackground(){
documentbgColor = getColor()
}

  function getColor(){
currentdate = new Date()
backgroundcolor = currentdategetSeconds()
if (backgroundcolor > )
backgroundcolor = backgroundcolor
else if (backgroundcolor > )
backgroundcolor = backgroundcolor
else if (backgroundcolor > )
backgroundcolor = backgroundcolor
if (backgroundcolor == )
return "olive";
else if (backgroundcolor == )
return "teal";
else if (backgroundcolor == )
return "red";
else if (backgroundcolor == )
return "blue";
else if (backgroundcolor == )
return "maroon";
else if (backgroundcolor == )
return "navy";
else if (backgroundcolor == )
return "lime";
else if (backgroundcolor == )
return "fuschia";
else if (backgroundcolor == )
return "green";
else if (backgroundcolor == )
return "purple";
else if (backgroundcolor == )
return "gray";
else if (backgroundcolor == )
return "yellow";
else if (backgroundcolor == )
return "aqua";
else if (backgroundcolor == )
return "black";
else if (backgroundcolor == )
return "white";
else if (backgroundcolor == )
return "silver";
}
// >
</script>
<body onload="documentbgColor=lime; returntrue;">
<a href="javascript:void();"onmouseover="randombackground()"><fontsize="" face="宋體">碰我改變背景顏色</font></a>

  點擊更換背景圖片

復制代碼 代碼如下:
<div style="float:right;marginright:px;">
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
<ahref="javascript:void();"><imgclass="button"onClick="javascript:documentbodystylebackground=url(images/bg/jpg)"></a>
</div>

  IE不能用的解決方法

復制代碼 代碼如下:

  
<imgonClick="javascript:documentbodystylebackground=url(images/bg/jpg);returnfalse;">


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19818.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.