实现功能：
预热作业.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置颜色</title>
<style type="text/css">
#click_btn{
background-color: red;
width: 100px;
height: 40px;
color: white;
}
#div1{
width: 100px;
height: 100px;
border:4px solid black;
}
#div2{
width: 730px;
height: 420px;
background-color: #808080;
position: absolute;
top: 0px;
left: 0px;
opacity:0.7;
display: none;
}
#div3{
width: 300px;
height: 200px;
background-color: white;
border: 20px solid #9c949c;
position: absolute;
top: 150px;
left: 350px;
line-height: 50px;
display: none;
}
#div3 input{
width: 45px;
height: 35px;
cursor:pointer;
}
#div3 input:hover{background: #f99f02}
#div3 .color1{color: white; background: #9cce00;}
#div3 .color1:hover{background: red;}
#div3 .color2{color: white; background: #f3c411;}
#div3 .color2:hover{background: blue;}
#div3 .color3{color: white; background: #5a94ef;}
#div3 .color3:hover{background: yellow;}
#red{background: red;}
#blue{background: blue;}
#yellow{background: yellow;}
#div3 .resure{width: 80px;height: 30px; background: #002952;color: white;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('click_btn');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oRed = document.getElementById('red');
var oBlue = document.getElementById('blue');
var oYellow = document.getElementById('yellow');
var oW1 = document.getElementById('w1');
var oW2 = document.getElementById('w2');
var oW3 = document.getElementById('w3');
var oH1 = document.getElementById('h1');
var oH2 = document.getElementById('h2');
var oH3 = document.getElementById('h3');
var oRecover = document.getElementById('recover');
var oSure = document.getElementById('sure');
oBtn.onclick = function(){
oDiv2.style.display = 'block';
oDiv3.style.display = 'block';
}
oRed.onclick = function(){
oDiv1.style.background = 'red';
}
oBlue.onclick = function(){
oDiv1.style.background = 'blue';
}
oYellow.onclick = function(){
oDiv1.style.background = 'yellow';
}
oW1.onclick = function(){
oDiv1.style.width = '200px';
}
oW2.onclick = function(){
oDiv1.style.width = '300px';
}
oW3.onclick = function(){
oDiv1.style.width = '400px';
}
oH1.onclick = function(){
oDiv1.style.height = '200px';
}
oH2.onclick = function(){
oDiv1.style.height = '300px';
}
oH3.onclick = function(){
oDiv1.style.height = '400px';
}
oRecover.onclick = function(){
oDiv1.style.width = '100px'
oDiv1.style.height = '100px';
oDiv1.style.border = '4px solid black';
oDiv1.style.background = 'white';
}
oSure.onclick = function(){
oDiv2.style.display = 'none';
oDiv3.style.display = 'none';
}
}
</script>
</head>
<body>
<strong>请为以下div设置样式：</strong>
<input type="button" value="点击设置" id="click_btn">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
请选择背景颜色：<input type="button" id="red" value="红" class="color1"> <input type="button" id="blue" value="蓝" class="color2"> <input type="button" id="yellow" value="黄" class="color3"><br />
请选择宽（px）：<input type="button" value="200" id="w1"> <input type="button" value="300" id="w2"> <input type="button" value="400" id="w3"><br />
请选择高（px）：<input type="button" value="200" id="h1"> <input type="button" value="300" id="h2"> <input type="button" value="400" id="h3"><br />
<center>
<input type="button" name="" value="恢复" class="resure" id="recover">
<input type="button" name="" value="确定" class="resure" id="sure">
</center>
</div>
</body>
</html>
注：现在的这些代码肯定是冗余且繁琐的，随着我不断学习，会越来越精化它。不过也是希望像我一样的初学者在实现功能的基础上再改良代码。不断练习、不断学习！
网友评论