分享一篇关于JS的实例代码_动视

分享一篇关于JS的实例代码

2020-11-27 20:19:50 责编:小采

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.dv { width:800px; height:600px; text-align:center;}
.td2 { width:80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;}
.dv1 { width:150px; height:150px; border:solid #000 3px;}
.dv2 { width:300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;}
.td3 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;}
.td4 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;}
.td5 { width:60px; height:30px; border:solid #999 1px; text-align:center; color:#FFF; background:#009;}
.tb { padding-left:70px; padding-top:20px;}
</style>
<script>
window.onload=function(){
var td1=document.getElementById("td");
var dv0=document.getElementById("dva");
var dv1=document.getElementById("dvv");
var dv2=document.getElementById("dve");
var color1=document.getElementById("c1");
var color2=document.getElementById("c2");
var color3=document.getElementById("c3");
var width1=document.getElementById("w1");
var width2=document.getElementById("w2");
var width3=document.getElementById("w3");
var height1=document.getElementById("h1");
var height2=document.getElementById("h2");
var height3=document.getElementById("h3");
var re=document.getElementById("recover");
var su=document.getElementById("sure");

td1.onclick=function(){
dv2.style.display='block';
dv0.style.background='#999999';
}

color1.onclick=function(){
dv1.style.background='#F00';
}
color1.onmouseover=function(){
color1.style.background='#F00';
}
color1.onmouseout=function(){
color1.style.background='#99CC66';
}

color2.onclick=function(){
dv1.style.background='#FF0';
}
color2.onmouseover=function(){
color2.style.background='#FF0';
}
color2.onmouseout=function(){
color2.style.background='#CCCC00';
}

color3.onclick=function(){
dv1.style.background='#00F';
}
color3.onmouseover=function(){
color3.style.background='#00F';
}
color3.onmouseout=function(){
color3.style.background='#3399CC';
}

width1.onclick=function(){
dv1.style.width='200px';
}
width1.onmouseover=function(){
width1.style.background='#F90';
}
width1.onmouseout=function(){
width1.style.background='#CCC';
}

width2.onclick=function(){
dv1.style.width='300px';
}
width2.onmouseover=function(){
width2.style.background='#F90';
}
width2.onmouseout=function(){
width2.style.background='#CCC';
}

width3.onclick=function(){
dv1.style.width='400px';
}
width3.onmouseover=function(){
width3.style.background='#F90';
}
width3.onmouseout=function(){
width3.style.background='#CCC';
}

height1.onclick=function(){
dv1.style.height='200px';
}
height1.onmouseover=function(){
height1.style.background='#F90';
}
height1.onmouseout=function(){
height1.style.background='#CCC';
}

height2.onclick=function(){
dv1.style.height='300px';
}
height2.onmouseover=function(){
height2.style.background='#F90';
}
height2.onmouseout=function(){
height2.style.background='#CCC';
}

height3.onclick=function(){
dv1.style.height='400px';
}
height3.onmouseover=function(){
height3.style.background='#F90';
}
height3.onmouseout=function(){
height3.style.background='#CCC';
}

re.onclick=function(){
dv1.style.width='150px';
dv1.style.height='150px';
dv1.style.background='none';
}

su.onclick=function(){
dv2.style.display='none';
dv0.style.background='none';
}
}
</script>
</head>

<body>
<div id="dva" class="dv">
<table>
<tr>
<td>
<strong>请为下面的DIV设置样式：</strong>
</td>
<td id="td" class="td2">
点击设置
</td>
</tr>
</table>
<div id="dvv" class="dv1">
</div>
<div id="dve" class="dv2">
<table cellspacing="10px">
<tr>
<td>请选择背景颜色：</td>
<td id="c1" class="td3" bgcolor="#99CC66">红</td>
<td id="c2" class="td3" bgcolor="#CCCC00">黄</td>
<td id="c3" class="td3" bgcolor="#3399CC">蓝</td>
</tr>
<tr>
<td>请选择宽(px)：</td>
<td id="w1" class="td4">200</td>
<td id="w2" class="td4">300</td>
<td id="w3" class="td4">400</td>
</tr>
<tr>
<td>请选择高(px)：</td>
<td id="h1" class="td4">200</td>
<td id="h2" class="td4">300</td>
<td id="h3" class="td4">400</td>
</tr>
</table>
<table class="tb" cellspacing="10px">
<tr>
<td id="recover" class="td5">恢复</td>
<td id="sure" class="td5">确定</td>
</tr>
</table>
</div>
</div>
</body>
</html>

下载本文

显示全文

全部频道