先看下我开始写的代码吧：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>切换红绿蓝</title>
6 <style>
7 #div{
8 width: 100px;
9 height:100px;
10 background-color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="div"></div>
16 <script src="main.js"></script>
17 </body>
18 </html>
html
1 /**
2 * Created by Administrator on 2016/8/8.
3 */
4 (function () {
5
6 var div = document.getElementById("div");
7 var i = 1;
8
9 function backgroundColor(color) {
10 var e=div.style.backgroundColor=color;
11 return e;
12 }
13 function ClickToSwitchColor() {
14 if (i % 3 == 0) {
15 backgroundColor("red");
16 // div.style.backgroundColor = "red";
17 } else if (i % 2 == 0) {
18 backgroundColor("blue");
19 // div.style.backgroundColor = "blue";
20 } else {
21 backgroundColor("green");
22 // div.style.backgroundColor = "green";
23 }
24 i++;
25 }
26
27 div.addEventListener("click", ClickToSwitchColor);
28
29 })
30 ();
js
我的代码可以实现，但是没有良好的扩展性，如再添加一中颜色遍不容易。
看下优化的代码吧
时间： 2024-10-14 04:54:31