如何制作动态背景颜色？

Question

如何制作动态背景颜色？

3

我对这个脚本有问题。我不知道如何使用它来制作动态RGB颜色。我是一个JavaScript新手。我已经使用了三个变量，并使用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>

- user3720770

你能够利用 JQuery 吗？ - IrishGeek82

我是，但我不知道怎么做。 - user3720770

像这样：http://casewarecomputers.com:8088/soHelp.html?step1=&step2=&step3=&step4=# - IrishGeek82

4个回答

1

您可以利用以下代码，仅对您的代码进行轻微更改后，调用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>

请让我知道是否有帮助 :)

- IrishGeek82

它什么也没做。只有空值和白色的div。或者我太蠢了。 - user3720770

是的！我搞定了！我得点击！ - user3720770

抱歉，我以为我已经将那个放在说明里了。 - IrishGeek82

0

试试这个

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

- user1112008

很好，但我不知道如何从跨度中获取变化的数字。 - user3720770

0

使用 HSL，这就是你所需要的。

jsBin 演示

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

只需在保持所需饱和度为50％和亮度为50％的情况下，动态更改色调。色调值从0到360（0=红色，360=红色），在中间您拥有所有颜色调色板。
使用c％360（%=提醒运算符）将我们的c计数器重置为0。

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

_{如果你需要透明度，也可以尝试使用HSLA颜色；）}

- Roko C. Buljan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Orelsanpls · Accepted Answer

JQuery是一个非常常用的JavaScript插件。使用它可以使JavaScript变得更加简单。

在JQuery中，您可以使用.css()函数非常简单地访问对象的CSS属性。

这里有一个关于JQuery的大型教程。

这里有Stack Overflow关于JQuery的指南。

尝试这个

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

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

试试这个

指导：

我认为你编写代码的方式不合适。使用糟糕的变量名等不仅不能节省时间，反而会让自己感到困惑。

1/ 创建一个唯一的函数，修改 RGB 值，例如：

  function increment(value)
    {
       value += 1;

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

       return value;
    }

2/ 也许有其他解决方案，可以避免使用 span？

/**
 * 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);

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

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

<div id="myDynamicBackground"></div>