Pure Javascript - setInterval (1s), setAttribute

Question

我想每秒改变正方形的颜色(#myID: width = height = 100px)。(为了检查开关循环是否工作，在每个"case"中我都写console.log("smth happened");)但是这个正方形的颜色不会改变。"小提琴"

接下来，每秒钟document.getElementById('myID')被写入一个新形成的变量 thessquare 。如何使变量全局，外部的功能?

Javascript:

var i = 0;
function changecolor()
{       
    var thesquare = document.getElementById('myID');
    switch (i)
    {
        case 0 :
        thesquare.setAttribute("background-color","red");
        ++i;
        break;
        case 1 :
        thesquare.setAttribute("background-color","green");
        ++i;
        break;
        default :
        thesquare.setAttribute("background-color","blue");
        i=0;
        break;
    }
}
setInterval("changecolor()",1000);

Answer 1

这不是您想要设置的属性，而是style:

thesquare.style.backgroundColor = 'red';

您的函数工作，但属性background-color不做任何事情。

且setInterval("changecolor()",1000);应为setInterval(changecolor,1000);

小提琴

Answer 2

接下来，每隔一秒document.getElementById('myID')被写入一个新形成的可变方阵。如何使变量全局化，在函数之外?

你不需要使用全局变量，你可以使用闭包和立即调用的函数表达式(IIFE)将它保存在外部作用域中:

(function() {
  var thesquare = document.getElementById('myID');
  var i = 0;
  function changecolor() {
    switch (i) {
        case 0 :
          thesquare.style.backgroundColor = "red";
          ++i;
          break;
        case 1 :
          thesquare.style.backgrounColor = "green";
          ++i;
          break;
        default :
          thesquare.style.backgroundColor = "blue";
          i=0;
          break;
    }
  }
  setInterval(changecolor, 1000);
}());

注意setInterval将以指定的时间间隔运行。它会慢慢失去时间。

您可以将整个开关块替换为以下内容来缩短代码:

   var colours = ['red','green','blue']
   thesquare.style.backgroundColor = colours[i++ % colours.length];