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

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。 因此，您希望输出颜色接近这些值。

您可以使用在线rgb颜色选择器之一搜索所需的颜色范围。

例如：

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

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

试玩一下范围并进行实验，直到获得喜欢的东西。 只是要确保不要超出0-255的范围，请记住，对于淡黄色，您需要高度r和g以及较低的b。

Answer 2

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

顺便说一句： 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 个解决方案

解决方案1
2 已采纳 2016-04-19 08:17:35

解决方案2
1 2016-04-19 08:17:02

解决方案3
0 2016-04-19 18:43:31

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-04-19 08:17:35

解决方案2 1 2016-04-19 08:17:02

解决方案3 0 2016-04-19 18:43:31

解决方案1
2 已采纳 2016-04-19 08:17:35

解决方案2
1 2016-04-19 08:17:02

解决方案3
0 2016-04-19 18:43:31