abstract：<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei";
}
ul,
li {
list-style: none;
}
#box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto 20px;
}
#btn {
width: 720px;
margin: 0 auto;
overflow: auto;
}
#btn li {
float: left;
width: 100px;
height: 40px;
border: solid 1px #333;
text-align: center;
line-height: 40px;
margin: 0 10px;
box-sizing: border-box;
cursor: pointer;
font-size: 18px;
}
#btn li:hover {
border: solid 1px #fff;
background: #333;
color: #fff;
}
#btn li.on {
background: red;
}
</style>
<body>
<div id="box"></div>
<ul id="btn">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="on"></li>
</ul>
<script>
(function() {
var oBox = document.getElementById("box"),
aBtn = document.querySelectorAll("#btn li");
var arr = ["变宽", "变高", "变色", "重置", "隐藏", "显示"];
var initWidht = oBox.clientWidth,
initHeight = oBox.clientHeight;
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].innerHTML = arr[i];
aBtn[i].onclick = function() {
switch (i) {
case 0:
oBox.style.width = "200px";
aBtn[i].className = "on";
break;
case 1:
oBox.style.height = "200px";
aBtn[i].className = "on";
break;
case 2:
oBox.style.backgroundColor = "green";
aBtn[i].className = "on";
break;
case 3:
oBox.style.width = initWidht + "px";
oBox.style.height = initHeight + "px";
oBox.style.backgroundColor = "red";
oBox.style.display = "block";
for (var j = 0; j < aBtn.length; j++) {
aBtn[j].className = "";
}
break;
case 4:
oBox.style.display = "none";
aBtn[i].className = "on";
aBtn[5].className = "";
break;
case 5:
oBox.style.display = "block";
aBtn[i].className = "on";
aBtn[4].className = "";
break;
}
};
}
})();
</script>
</body>
</html>尽量模块化方便后期修改。
Correcting teacher：西门大官人Correction time：2019-03-03 09:55:22
Teacher's summary：代码的结构不太好
1、缺少必要的注释，不方便阅读
2、控制样式的代码建议分离出来成为一个独立的方法
3、绑定事件onclick也可以独立出来成为一个独立的方法