更改背景颜色与时间间隔

我试图慢慢地改变我的背景颜色从黑色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>

来源

2015-08-21 Bran123123

你应该看一看在[CSS动画]（https://css-tricks.com/almanac/properties/a/animation/）或[transitions]（https://css-tricks.com/almanac/properties/t/transition/）这种类型的效果！ –

在for循环中反复更改页面样式不会使外观变“缓慢”。这并不是说循环运行速度太快。相反，浏览器在脚本运行时不会重新绘制页面。

取而代之的是，设置一个函数的间隔，每次都将背景设置为略微不同的颜色，并立即返回。

来源

2015-08-21 23:58:26 guest

这是因为for循环增量声明x + 8：

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

您应该使用x = x + 8或x += 8因为你通过8递增x，但你不能再次分配给x。

来源

2015-08-22 00:06:13 soutoner

我同意@Casey楚，你可能想看看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以毫秒为单位进行测量。

来源

2015-08-22 00:15:21

<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/

来源

2016-12-16 12:59:00

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

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');

来源

2017-02-08 05:47:38 Hans

更改背景颜色与时间间隔

回答

相关问题