Question

我正在尝试创建一些JavaScript代码，它将每8秒更改一个元素的背景颜色，在这种情况下是一个jumbotron。我在网上做了很多研究，并使用了我发现的一些技巧，但我仍然无法使其发挥作用。以下所有代码包括我正在使用的HTML，CSS和JavaScript。任何建议都会很棒，但请记住我只是学习JavaScript。这是我的第一个stackoverflow问题。

<html>

<style>
  .jumbocolors {
    position: absolute;
    height: 250px;
    width: 500px;
    border: 2px solid black;
    text-align: center;
    font-size: 60px;
  }
</style>

<body onload="color_timer()">
  <div>
    <jumbotron id="jumbo1" class="jumbocolors">Sample Text</jumbotron>
  </div>
</body>

<script>
  function color_timer() {
    var timer;
    var finished = false;
    while (!finished) {
      timer = setTimeout(random_color(), 8000);
      finished = random_color();
    }
  }

  function random_color() {
    var R_random = parseInt(Math.floor(Math.random() * 256));
    var G_random = parseInt(Math.floor(Math.random() * 256));
    var B_random = parseInt(Math.floor(Math.random() * 256));
    var elem = document.getElementById("jumbo1");
    elem.style.backgroundColor = 'rgb(R_random, G_random, B_random)';
    return false;
  }
</script>

</html>

Answer 1

此代码中存在相当多的错误。

您需要在document.getElementById()中正确地对各种字符进行大写，并将Math函数大写。
此字符串'rgb(R_random, G_random, B_random)'实际上并未将javascript变量拉入字符串。它应该重写为：'rgb(' + R_random + ', ' + G_random + ', ' + B_random +')'
有一种更简单的方法可以使用setInterval设置定时器，每8秒更改一次颜色。查看下面的更新代码：

<html>

<style>
  .jumbocolors {
    position: absolute;
    height: 250px;
    width: 500px;
    border: 2px solid black;
    text-align: center;
    font-size: 60px;
  }
</style>

<body onload="color_timer()">
  <div>
    <jumbotron id="jumbo1" class="jumbocolors">Sample Text</jumbotron>
  </div>
</body>

<script>
  function color_timer() {
    setInterval(function(){
      random_color();
    },8000);
  }

  function random_color() {
    var R_random = parseInt(Math.floor(Math.random() * 256));
    var G_random = parseInt(Math.floor(Math.random() * 256));
    var B_random = parseInt(Math.floor(Math.random() * 256));
    var elem = document.getElementById("jumbo1");
    elem.style.backgroundColor = 'rgb(' + R_random + ', ' + G_random + ', ' + B_random +')';
  }
</script>

</html>

Answer 2

此代码中存在许多错误 - 使用浏览器控制台对于编写JavaScript时的调试至关重要。

第一个错误是Math必须大写。

第二个错误是，由Id选择的功能未正确装入，必须为document.getElementById。

第三个错误是不需要循环 - 你可以使用setInterval每n毫秒运行一个函数。

第四个错误是你的setTimeout中你正在调用你的函数而不是传入函数定义。

第五个错误是您需要正确连接字符串以构建新的backgroundColor。不是错误，但您也不需要parseInt()随机颜色数字的结果。

请参阅以下修订的工作代码：

<html>
  <style>
    .jumbocolors {
      position: absolute;
      height: 250px;
      width: 500px;
      border: 2px solid black;
      text-align: center;
      font-size: 60px;
    }
  </style>

  <body onload="color_timer()">
    <div>
      <jumbotron id="jumbo1" class="jumbocolors">Sample Text</jumbotron>
    </div>
  </body>

  <script>
    function color_timer() {
      setInterval(random_color, 8000);
    }

    function random_color() {
      var R_random = Math.floor(Math.random() * 256);
      var G_random = Math.floor(Math.random() * 256);
      var B_random = Math.floor(Math.random() * 256);
      var elem = document.getElementById("jumbo1");
      elem.style.backgroundColor = 'rgb(' + R_random + ',' + G_random + ',' + B_random + ')';
    }
  </script>

我无法使我的定时随机颜色生成器工作

2 个答案: