1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6
7
8 </head>
9 <body>
10 <input type="button" name="" class="btn" value="测试1" />
11 <input type="button" name="" class="btn" value="测试2" />
12 <input type="button" name="" class="btn" value="测试3" />
13
14 </body>
15
16 <script type="text/javascript">
17 // 自定义属性
18 var button = document.getElementById("btn");
19 // 创造属性，不能乱用
20 button.guoxiaomin = "1";
21 console.log(button.guoxiaomin);
22
23 var btns = document.getElementsByClassName("btn");
24 var corlors = ["red","green","yellow"];
25 for (var i = 0;i < 3; i++) {
26 // 利用自定义属性记录i 的值
27 btns[i].index = i;
28 console.log(btns[i].index);
29 btns[i].onclick = function(){
30 if(this.index == 0){
31 document.body.style.background = "red";
32 }else if(this.index == 1){
33 document.body.style.background = "green";
34 }else{
35 document.body.style.background = "yellow";
36 }
37 document.body.style.background = corlors[this.index];
38
39 }
40 }
41
42
43 for (var i = 0;i < 3; i++) {
44
45 }console.log(i);
46 //先赋值：i = 0 ；再判断i < 3 ？; 如果为true侧执行 console.log(i);最后i++;
47
48
49 </script>
50
51
52 </html>