如何制作动态背景色

我对这个脚本有一个问题。我不知道如何使动态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>

JQuery是一个非常常用的javascript插件。有了它，javascript变得简单了。

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

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

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

试试这个

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，可能存在另一种解决方案?

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

您可以利用下面的代码，它(在对您的代码进行微小的更改之后)调用updatebgcolordynamic()方法。这反过来又使用了。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>

如果有帮助请告诉我:)

试试这个

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

使用HSL这是你所需要的。

<<p> jsBin演示/strong>
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颜色;)}

相关内容

最新更新

热门标签：