js实现九宫格点击按钮随机三个格子闪烁，发生错误

Question

代码

html

<div class="container">
    <ul class="flex">
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <li class="block"></li>
      <button onclick="start()">开始闪</button>
      <button onclick="end()">结束闪</button>
    </ul>
  </div>

JavaScript

//开始
    function start() {
      //设置定时器
      var int = setInterval(changeColor, 300)
      //改变颜色
      function changeColor() {
        //随机获取颜色
        function getColor() {
          var R = Math.floor(Math.random() * 256)
          var G = Math.floor(Math.random() * 256)
          var B = Math.floor(Math.random() * 256)
          return 'rgb' + '(' + R + ',' + G + ',' + B + ')'
        }
        //随机取得小格子
        function num() {
          var num;
          var count = [1, 2, 3, 4, 5, 6, 7, 8, 9];
          var num = count[Math.floor(Math.random() * 9)];
          return num;
        }
        //把颜色添加到小格子里
        var oLi = document.querySelectorAll('.blcok');
        for (var i = 0; i < 3; i++) {
          oLi[num()].style.backgorundColor = getColor()
        }
      }

    }
    //结束
    function end() {
      var finsh = clearInterval(int)
    }

错误信息

Answer 1

count 要从0开始。

其实直接返回下标也是一样的效果，因为从0开始之后，count[0]===0，其他数字也是。

JS 放到HTML前也会导致……但只有小白才会犯此类错误。

Answer 2

有问题的地方很多啊，因为你不是给的完整代码，所以只能针对你给出的内容说一下，除了前面madRain所说的问题外，还有：

1. 定时器接收变量应该是全局变量，否则后面停止时不能工作
2. oLi[num()].style.backgorundColor = getColor()也有拼写问题，正确的应该是oLi[num()].style.backgroundColor = getColor()
3. 此外在定时器接收变量处理上你的代码不安全，如果连续点按开始，会出现停不下来的情况。

简单写了下处理代码供参考：

 var int=0; // 全局定时器接收变量
  function start() {
      //设置定时器
      if(int===0){  // 只有没有打开定时器时才执行，否则不执行
        int = setInterval(changeColor, 300)
      }
      //改变颜色
      function changeColor() {
        //随机获取颜色
        function getColor() {
          var R = Math.floor( Math.random() * 256 )
          var G = Math.floor( Math.random() * 256 )
          var B = Math.floor( Math.random() * 256 )
          return 'rgb' + '(' + R + ',' + G + ',' + B + ')'
        }
        //把颜色添加到小格子里
        var oLi = document.querySelectorAll('.block');
        for (var i = 0; i < 3; i++) {
          oLi[ Math.floor(Math.random() * 9)].style.backgroundColor = getColor()
        }
      }

    }
    //结束
    function end() {
      if(int){
          clearInterval(int)
          int=0;
      }
    }