Question

我试图将背景颜色从黑色rgb(0,0,0)慢慢更改为rgb(8,8,8)，依此类推到rgb(255,255,255)。我想用Javascript和函数来做这件事。我似乎陷入无限循环，我不知道为什么。请帮忙。谢谢！

<body onload="setInterval">
    <div id="topBanner">
        <h1>Testing</h1>
    </div>
    <script>
        setInterval(function() {
            for (var x = 0; x <= 255; x + 8) {
                document.body.style.background = "rgb(" + x + "," + x + "," + x + ")"
            }
        }, 1000)
    </script>
</body>

Answer 1

这是因为for循环增量语句x + 8：

for (var x = 0; x <= 255; x + 8) {

您应该使用x = x + 8或x += 8，因为您将x递增8，但您又未将其分配给x。

Answer 2

在for循环中反复更改网页的样式不会让外观变得缓慢。＆＃34;这并不是说循环运行得太快。相反，浏览器在脚本运行时不会重绘页面。

相反，使用一个函数设置一个间隔，每次都将背景设置为稍微不同的颜色并立即返回。

Answer 3

我同意@Casey Chu，你可能想看看CSS过渡，但是如果你正在寻找JS附近的东西：

(function ($, interval_ms) {

    var octet = 0;

    var handle = setInterval(function () {

        octet += 8;

        if (octet > 255) {
            clearInterval(handle);
        }

        $('body').css("background-color", "rgb(" + octet + ", " + octet + ", " + octet + ")");


    }, interval_ms);
})(jQuery, 100);

interval_ms以毫秒为单位。

Answer 4

    <div id="main_div">
      <table id="table_box">
        <tr>
          <td>101</td>
          <td>102</td>
          <td>103</td>
          <td>104</td>
          <td>105</td>
          <td>106</td>
          <td>107</td>
          <td>108</td>
        </tr>
        <tr>
          <td>109</td>
          <td>110</td>
          <td>111</td>
          <td>112</td>
          <td>113</td>
          <td>114</td>
          <td>115</td>
          <td>116</td>
        </tr>
        <tr>
          <td>117</td>
          <td>118</td>
          <td>119</td>
          <td>120</td>
          <td>121</td>
          <td>122</td>
          <td>123</td>
          <td>124</td>
      </table>
    </div>

< script type = "text/javascript" >
  $(document).ready(function($) {
    var def_table = $('#table_box'),
      arr_td,
      tr_len = $(def_table).find('tr').length,
      arr_tr = $(def_table).find('tr'),
      rows = 0,
      cols = 0,
      colorIndex = 0,
      color = ['red', 'orange', 'blue', 'yellow', 'black', 'green'];

    setInterval(function() {
      arr_td_len = $(arr_tr[rows]).find('td').length,
        arr_td = $(arr_tr[rows]).find('td'); //find row tr td 
      $(arr_td[cols]).css('color', 'white');
      $(arr_td[cols]).css('background-color', color[colorIndex]);
      cols++;
      if (cols == arr_td_len) {
        rows++;
        cols = 0;
        if (rows == tr_len) {
          rows = 0;
          colorIndex++;
          if (colorIndex == 6) {
            colorIndex = 0;
          }
        }
      }
    }, 100);
  });

< /script>

演示：https://jsfiddle.net/y11LLaea/

Answer 5

这是一个随机颜色的快速功能，你可以改变它以使用你想要的颜色

function BgColorTransition(element)
{
   var intervals = setInterval(setBgColor, x-amount-of-seconds);

   function setBgColor()
   {
      var ran = Math.floor(Math.random() * (111111 + 999999) - 111111);
      $(element).css({
        backgroundColor: '#'+ran,
        transition: '20s ease-in-out'
     });
   }

}
BgColorTransition('body');

随时间间隔更改背景颜色

5 个答案: