Question

我遇到了这个脚本的问题。我不知道如何使用它来制作动态rgb。我是javascript noob。我使用了三个vars并使用getElementById保存。而且我不知道如何从跨度中保存它。

            var i = 0;
    var ii = 20;
    var iii = 18;

function increment() {

   i++;
    document.getElementById('number').innerHTML = i;
        if (i==255) {
document.getElementById('number').innerHTML = i--;

}
}
    function increment2() { 
   ii++;
    document.getElementById('pica').innerHTML = ii;
        if (ii==255) {
document.getElementById('pica').innerHTML = ii--;
}
}
    function increment3() { 
   iii++;
    document.getElementById('dick').innerHTML = iii;
        if (iii==255) {
document.getElementById('dick').innerHTML = iii--;

}
}   

    setInterval('increment()', 50);
    setInterval('increment2()', 60);
  setInterval('increment3()', 55);
  var rgb = document.getElementById('rgb').innerHTML;   
  document.write(rgb);

这是html：

 <div id="rgb">
 <span id="number"></span>
 <span id="pica"></span>
 <span id="dick"></span>
 </div>

这是我需要动态的rgb：

 <div id="id" style="background-color: rgb(255,255,255); 
 width: 100%; height: 100%;"></div>

Answer 1

JQuery是一个非常常用的javascript插件。随着它javascript变得更加简单。

在 JQuery 中，您可以使用.css() function

非常简单地访问对象的css属性

Here你有一个关于 JQuery 的大教程。

Here你有关于 JQuery 的堆栈溢出指南。

试试这个

var r = $('#number').html();
var g = $('#pica').html();
var b = $('#dick').html();

$("#id").css("background-color", "rgb(" + r + "," + g + "," + b + ")");

试试这个

<强>指导：

我认为你的代码方式是不合适的。通过使用坏变量名称等等，您不会节省时间。你让自己感到困惑。

1 / 创建修改rgb值ex

的唯一函数

  function increment(value)
    {
       value += 1;

       if (value == 256) {
          return 255;
       }

       return value;
    }

2 / 而不是使用span可能存在其他解决方案？

＆＃13;

/**
 * Where we are storing the colors
 */
const colors = {
  red: 0,
  green: 0,
  blue: 0,
};

/**
 * Increment the color by one
 */
function increment(value) {
  value += 1;

  return value == 256 ? 0 : value;
}

/**
 * Gives a random number so we can increase a random color
 */
function getRandomNumber(maxNumber) {
  return Math.floor(Math.random() * Math.floor(maxNumber));
}

/**
 * Function that's incrementing the colors
 */
function incrementBackground() {
  const randomColorIndexToChange = getRandomNumber(Object.keys(colors).length - 1);

  const keyOfTheColorToChange = Object.keys(colors)[randomColorIndexToChange];

  colors[keyOfTheColorToChange] = increment(colors[keyOfTheColorToChange]);

  $('#myDynamicBackground').css(
    'background-color',
    `rgb(${colors.red}, ${colors.green},${colors.blue})`,
  );

  setTimeout(incrementBackground, 1);
}

setTimeout(incrementBackground, 1);

＆＃13;

#myDynamicBackground {
  background-color: rgb(0, 0, 0);
  width: 5em;
  height: 5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDynamicBackground"></div>

＆＃13;

Answer 2

您可以使用以下代码（仅对您的代码进行微小更改后）调用updateBgColorDynamically（）方法。然后使用.style.backgroundColor和字符串连接来更新颜色。

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>IrishGeek82 SO Help File</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script>
    $(document).ready(function() 
                      {
                        increment1();
                        increment2();
                        increment3();
                      }
                    );
    </script>
    <style type="text/css">
    .invalid
    {
        border:1px solid red;
    }

    .noSelect
    {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }    
    </style>
    <script type="text/javascript">

    var iRed   = 0;
    var iGreen = 20;
    var iBlue  = 18;

    function increment1() 
    {

       iRed++;
       document.getElementById('red').innerHTML = iRed;
       if (iRed == 255) 
       {
            document.getElementById('red').innerHTML = 0;
       }
       updateBgcolorDynamically();
    }

    function increment2() {

       iGreen++;
       document.getElementById('green').innerHTML = iGreen;
       if (iGreen==255) 
       {
            document.getElementById('green').innerHTML = 0;
       }
       updateBgcolorDynamically();
    }

    function increment3() 
    { 
       iBlue++;
       document.getElementById('blue').innerHTML = iBlue;
        if (iBlue == 255) 
        {
            document.getElementById('blue').innerHTML = 0;
        }

        updateBgcolorDynamically();
    }       

    function updateBgcolorDynamically()
    {
        document.getElementById("dynamicDiv").style.backgroundColor = "rgb("+iRed+","+iGreen+","+iBlue+")";
    }

    </script>
</head>
<body>
 <div id="rgb">
    <span class ="noSelect" id="red" onclick="increment1();">0</span>
    <span class ="noSelect" id="green" onclick="increment2();">0</span>
    <span class ="noSelect" id="blue" onclick="increment3();">0</span>
    <hr>
    <div id="dynamicDiv" style="background-color:rgb(255,255,255);min-width: 100%; min-height: 500px;">
    </div>    
 </div>
</body>
</html>

如果有帮助，请告诉我。）

Answer 3

试试这个

document.getElementById('id').style.backgroundColor = 'rgb(' + [a,b,c].join(',') + ')';

Answer 4

使用HSL 这就是您所需要的一切。

<强> jsBin demo

var $div = document.getElementById('id'),
    c = 0;   
function changeColor(){
    ++c; // increment counter
    $div.style.backgroundColor = "hsl("+( c%360 )+", 50%, 50%)";
}
setInterval(changeColor, 50);

只需动态更改 Hue ，同时将所需的饱和度保持为50%，将亮度保持为50%。 Hue 值介于0到360之间，（0 =红色，360 =红色），介于两者之间，您可以使用所有颜色调色板。
c%360（% =提醒运算符）用于将c计数器重置为0。

hsl( HUE[0-360] , SATURATION[0-100%] , LIGHTNESS[0-100%]);

_{如果您需要不透明度，还要显示HSLA颜色;）}

如何制作动态背景色？

4 个答案: