渲科
首先我们来看一下本阶段我们需要完成的成品：
下面是源码：
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.item {width: 30px;height: 30px;}</style></head><body><table border="" cellspacing="" cellpadding=""><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr><tr><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td><td class="item"></td></tr></table><input type="button" name="" id="turnRedByIndex" value="逐个变红" /><input type="button" name="" id="reset" value="重置" /><ol id="ol1"></ol></body><script type="text/javascript">var items = document.getElementsByClassName('item');//找到页面中所有的小方格(class = 'item')var ol1 = document.getElementById('ol1');//找到页面中的有序列表ol1var index = 0;//定义一个初始值为0，变量名为index的int类型的变量var allowRed = true;//定义一个初始值为true，变量名为allowRed的bool类型的变量var isrun = false;//定义一个初始值为false，······，用来记录逐个变红的进行状态document.getElementById('turnRedByIndex').onclick = function() {//给按钮绑定点击事件log('点击‘逐个变红’按钮！');if(isrun){//判断是否在逐个变红的状态，如果是return;//退出函数，以下语句不再执行}isrun = true;//给逐个变红的状态赋值为：trueturnRedByIndex();//调用逐个变红的函数};document.getElementById('reset').onclick = reset;//给按钮绑定点击事件for (var i = 0; i < items.length; i++) {//给‘方格’绑定点击事件items[i].value = i;items[i].onclick = function() {turnRed(this);log(`点击了` + (this.value + 1) + `号方块！`);}}function turnRed(doc) {doc.style.background = 'red';}function reset() {log('点击‘重置’按钮！');if (isrun) {allowRed = false;isrun = false;}index = 0;for (var i = 0; i < items.length; i++) {items[i].style.background = 'white';}}function turnRedByIndex() {if (!allowRed) {index = 0;allowRed = true;return;}turnRed(items[index]);index++;if (index < 81) {setTimeout(turnRedByIndex, 100);} else {index = 0;isrun = false;}}function log(infos) {var li = document.createElement('li');//创建li元素var txt = document.createTextNode(infos);//创建文本li.appendChild(txt);//把文本添加到li元素里面作为子元素ol1.appendChild(li);//把li元素添加到ol元素中作为子元素}</script></html>
有问题的话可以微信或者公众号私信我！
