澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

纯js实现遮罩层效果原理分析,js点击更换背景颜

本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下:

可以说这个功能,在我理解了前面的“贪吃蛇”之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理

1,按钮样式

方法一:

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>

<input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/>

* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div

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>

<input type="button" value="提交" style="background:url(图片地址) no-repeat;border:none;text-indent:-2000px;width:100px;height:30px;">

* 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现

3,触碰样式

 
方法三:
就是用图片按钮,即:

2、代码实现

复制代码 代码如下:

复制代码 代码如下:

html语言如下:

<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 }
}
}

<input name="submit" type="image" value=" " src="jb51.jpg" />

复制代码 代码如下:

function randombackground(){
document.bgColor = getColor()
}

希望本文所述对大家基于javascript的web程序设计有所帮助。

<html>

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>

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:纯js实现遮罩层效果原理分析,js点击更换背景颜