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>
时间: 2024-08-19 18:08:56