分享一篇关于JS的实例代码-js教程-PHP中文网

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

零下一度

发布： 2017-06-26 15:16:42

原创

1050人浏览过

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