Web前端--阶段测试-技术圈

首先我们来看一下本阶段我们需要完成的成品：
下面是源码：
<!DOCTYPE html><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');//找到页面中的有序列表ol1    var 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;//给逐个变红的状态赋值为：true      turnRedByIndex();//调用逐个变红的函数    };    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>
有问题的话可以微信或者公众号私信我！