首先我要吐槽一下,csdn简直是在做死啊,复制博文底下的那个引用太恶心了,我复制本身的博客,还有引用,啥玩意啊。。。
因此我决定换地方了,之后github(偏重代码)和gitee(偏重知识)会常常更新。javascript
就是让你用es5写代码,实现点击以后这样。我感受就2个考点,一个是闭包,还有判断特殊状况。
这里用到了闭包仍是令我挺吃惊的,由于你要循环给td加click事件,在事件里要用到外面的i,由于是es5因此不能用let, 只能用var,因此只有闭包能改变i的做用域。css
test.js
html
let cc = (...val) => console.log(...val); // --- var tds = document.querySelectorAll('td'); // cc(tds); for (var i = 0; i < tds.length; i++) { // 这里用到了闭包,改变i的做用域 (function (i) { tds[i].onclick = function () { cle(); // cc(this); // cc(i); play(i); } })(i) } // 清除颜色 function cle() { for (var i = 0; i < tds.length; i++) { tds[i].classList = ''; } } // 把9个设class function play(x) { tds[x].classList = 'main'; if (Math.floor((x - 1) / 10) === Math.floor(x / 10)) { tds[x - 1].classList = 'color'; } if (Math.floor((x + 1) / 10) === Math.floor(x / 10)) { tds[x + 1].classList = 'color'; } if (x - 10 >= 0) { tds[x - 10].classList = 'color'; if (Math.floor((x - 1 - 10) / 10) === Math.floor((x - 10) / 10)) { tds[x - 1 - 10].classList = 'color'; } if (Math.floor((x + 1 - 10) / 10) === Math.floor((x - 10) / 10)) { tds[x + 1 - 10].classList = 'color'; } } if (x + 10 < 100) { tds[x + 10].classList = 'color'; if (Math.floor((x - 1 + 10) / 10) === Math.floor((x + 10) / 10)) { tds[x - 1 + 10].classList = 'color'; } if (Math.floor((x + 1 + 10) / 10) === Math.floor((x + 10) / 10)) { tds[x + 1 + 10].classList = 'color'; } } }
index.html
java
<!DOCTYPE html> <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>Document</title> <style> td { display: inline-block; width: 20px; height: 20px; border: 1px solid; } table { border-spacing: 0px; } .color { background-color: rgb(72, 233, 233); } .main { background-color: rgb(58, 61, 214); } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td class="color"></td> <td class="main"></td> <td class="color"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="./src/test.js"></script> </body> </html>
<!DOCTYPE html> <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>Document</title> <style> td { display: inline-block; width: 20px; height: 20px; border: 1px solid; } table { border-spacing: 0px; } .color { background-color: rgb(72, 233, 233); } .main { background-color: rgb(58, 61, 214); } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td class="color"></td> <td class="main"></td> <td class="color"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="./src/test.js"></script> </body> </html>