Question

我找到了这个随意改变背景渐变颜色的简洁脚本我想问一下，我怎样才能缩小颜色范围 - 我希望它只使用黄色和橙色在此先感谢：）



function newGradient() {
  var c1 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  var c2 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')';
  c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')';
  return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')';
}

function rollBg() {
  $('.bg.hidden').css('background', newGradient());
  $('.bg').toggleClass('hidden');
}

Answer 1

看这里：

var c1 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  var c2 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };

从0到255（最大）随机选择两种RGB颜色。您要做的就是将颜色分量的随机值更改为黄色范围。黄色是r = 255，g = 255，b = 0。因此，您希望输出颜色接近这些值。

您可以使用online rgb color pickers之一搜索所需的颜色范围。

例如：

＆＃13;

function newGradient() {
  var c1 = {
        r: Math.floor(255),
        g: Math.floor(35+Math.random()*220),
        b: Math.floor(Math.random()*55)
      };
      var c2 = {
        r: Math.floor(255),
        g: Math.floor(35+Math.random()*220),
        b: Math.floor(Math.random()*85)
      };
  c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')';
  c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')';
  return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')';
}

function rollBg() {
  $('body').css('background', newGradient());
  setTimeout(function(){rollBg();}, 1000);
}
rollBg();

＆＃13;

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

＆＃13;

玩范围和实验，直到你得到你喜欢的东西。请确保不要超出0-255范围，并记住黄色，你需要高度r和g以及低b。

Answer 2

编织：http://kodeweave.sourceforge.net/editor/#a50f32b869502470d39e0fadaeb655c4

BTW：kodeWeave附带内置颜色选择器，可与hex，rgb和hsl配合使用。

此方法使用十六进制代码来保留代码DRY。

function newGradient() {
  var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16),
      randomColor2 = "#" + Math.floor(Math.random()*16777215).toString(16);
  return 'radial-gradient(at top left, '+randomColor1+', '+randomColor2+')'
}

setInterval(function() {
  $('body').css('background', newGradient())
}, 1000)

html, body {
  height: 100%;
}

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

Answer 3

这是使用hsl -

的方法

function getRndInRange(fromAngle, toAngle) {
    var angle = fromAngle + toAngle * Math.random();
    return "hsl(" + angle + ", 75%, 50%)";
}

脚本随机改变背景渐变颜色[但从特定范围]

3 个答案: