我无法让我的定时随机彩色生成器工作

我正在尝试创建一些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>

来源

2017-02-11 Timothy

这是'的Math.random（）''没有的Math.random（）'！ –

[Math.random（）]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random） –

检查您的浏览器控制台，您有一堆错误。 –

有整个代码不少错误。

你需要利用各种人物的正确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>

来源

2017-02-11 23:31:06

它工作！你摇滚，非常感谢你。现在我要添加一个转换持续时间，我会准确地得到我想要的。再次感谢。 – Timothy

@蒂莫西，你非常欢迎！如果此答案解决了您的问题，则可以使用投票箭头下方的复选标记将其标记为“已接受”。 –

有这个代码的一些误区 - 使用浏览器控制台，你编写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>

来源

2017-02-11 23:37:01 hackerrdave

谢谢hackerrdave，我很感激。 – Timothy

我无法让我的定时随机彩色生成器工作

回答

相关问题