手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js点击更换背景颜色或图片的实例代码
js点击更换背景颜色或图片的实例代码
摘要:1,按钮样式复制代码代码如下:org_Color=document.bgColor.substring(1.10)2,下拉样式复制代码代码如...

1,按钮样式

复制代码 代码如下:

<script>

org_Color=document.bgColor.substring(1.10)

</script>

<form>

<input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'">

<input type="button" value="浅蓝色背景"onClick="document.bgColor='#c6fffe'">

<input type="button" value="粉红色背景"onClick="document.bgColor='#ffc9c6'">

<input type="button" value="墨绿色背景"onClick="document.bgColor='#508b7d'">

<input type="button" value="天蓝色背景"onClick="document.bgColor='#7BC7FF'">

<input type="button" value="米白色背景"onClick="document.bgColor='#f0f0f0'">

</form>

2,下拉样式

复制代码 代码如下:

<selectonChange="document.bgColor=this.options[this.selectedIndex].value">

<option value="#C0C0C0">灰色的

<option value="BLACK">黑的色

<option value="d2c6ff">淡紫蓝

<option value="feefc7">太阳黄

<option value="ffd2c6">淡红橘

<option value="c7fed8">苹果绿

<option value="80ff80">草原绿

<option value="#C1BC59">橄榄色

<option value="#7BC7FF">天空蓝

<option value="#AEDFD3">蓝绿色

<option value="#508B7D">墨绿色

<option value="#F0F0F0">米白色

</select>

3,触碰样式

复制代码 代码如下:

<scriptlanguage="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>

<body onload="document.bgColor='lime'; returntrue;">

<a href="javascript:void(0);"onmouseover="randombackground()"><fontsize="5" face="宋体">碰我改变背景颜色</font></a>

点击更换背景图片:

复制代码 代码如下:

<div>

<ahref="javascript:void(0);"><imgclass="button1"onClick="javascript:document.body.style.background='url(images/bg/1.jpg)'"></a>

<ahref="javascript:void(0);"><imgclass="button2"onClick="javascript:document.body.style.background='url(images/bg/2.jpg)'"></a>

<ahref="javascript:void(0);"><imgclass="button3"onClick="javascript:document.body.style.background='url(images/bg/3.jpg)'"></a>

<ahref="javascript:void(0);"><imgclass="button4"onClick="javascript:document.body.style.background='url(images/bg/4.jpg)'"></a>

<ahref="javascript:void(0);"><imgclass="button5"onClick="javascript:document.body.style.background='url(images/bg/5.jpg)'"></a>

<ahref="javascript:void(0);"><imgclass="button6"onClick="javascript:document.body.style.background='url(images/bg/6.jpg)'"></a>

</div>

IE6不能用的解决方法:

复制代码 代码如下:

<imgonClick="javascript:document.body.style.background='url(images/bg/1.jpg)';returnfalse;">

【js点击更换背景颜色或图片的实例代码】相关文章:

JavaScript实现点击文字切换登录窗口的方法

Jquery实现动态切换图片的方法

点击变化图象 不错

jquery预加载图片的方法

javascript瀑布流式图片懒加载实例解析与优化

jquery实现弹出层效果实例

在页面中输出当前客户端时间javascript实例代码

鼠标图片振动代码

js+html5绘制图片到canvas的方法

自适应图片大小的弹出窗口

精品推荐
分类导航