Question

到目前为止，当我点击按钮时，我可以在页面上获取我的背景颜色，但仅限于1种颜色。

我希望能够一直点击按钮，每次都能获得不同的颜色，或者至少有一些不同的预设颜色。

这就是我现在所拥有的。

<button type="button" onclick="myFunction()">Change Color</button>

<script>
function myFunction()
{   
document.body.style.backgroundColor= "green";
}
</script>

Answer 1

您可以通过引导程序更改按钮的颜色；

将颜色更改为红色更改颜色为蓝色更改颜色为绿色更改颜色为黄色

Answer 2

<script>
var randomnumber=Math.floor(Math.random()*10)

function myFunction()
{
switch(randomnumber)
{
case 1:
  document.body.style.backgroundColor= "green";
  break;
case 2:
  document.body.style.backgroundColor= "blue";
  break;
case 3:
  document.body.style.backgroundColor= "red";
  break;
...
etc
...


default:
  code to be executed if n is different from case 1 and 2
}   

}
</script>

此功能应该有效。首先生成1到10之间的随机数，然后切换

Answer 3

试试这个

function myFunction(){   
    var colors = ["green", "black","yellow"],
    selectedColor = colors[Math.floor(Math.random()*colors.length)]
    $("body").css("background-color", selectedColor);
}

您可以使用您想要使用的任何颜色。把它们放进阵列。您也可以使用颜色代码，例如"#F4F5F3"。

<强> Js Fiddle Demo

Answer 4

您可以使用随机颜色生成器：

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

然后将生成的颜色作为背景颜色传递。

Answer 5

你可以尝试使用这样的东西。它有一个软转换动画，你想要任何颜色。

＆＃13;

$(document).ready(function(){
setColor();
function setColor(){
     var colors=["#33ccff", "#ffff99","#cc6699"];
      var color =Math.floor(Math.random() * (colors.length));
  
    $('body').toggleClass('clicked');
    setTimeout(function(){
     $('.clicked').css("background-color", colors[color]);
    $('body').removeClass('clicked');
    }, 200)  
  }
  
   $('#gen').on("click", function(){
    setColor();
  });
  
  
});

＆＃13;

body{
  background-color: grey;
  transition:background-color 0.5s ease;
}
.clicked {
  background:lightgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="btn btn-primary" id="gen">Generate</button>
</body>
  </html>

＆＃13;

Answer 6

function black() {
	document.body.style.backgroundColor="black"
}

function blue() {
	document.body.style.backgroundColor="blue"
}

function fuchsia() {
	document.body.style.backgroundColor="fuchsia"
}

function green() {
	document.body.style.backgroundColor="green"
}

function orange() {
	document.body.style.backgroundColor="#c44000"
}

function purple() {
	document.body.style.backgroundColor="purple"
}

function red() {
	document.body.style.backgroundColor="red"
}

function oil() {
	document.body.style.backgroundColor="#808000"
}

function white() {
	document.body.style.backgroundColor="white"
}

function brown() {
	document.body.style.backgroundColor="brown"
}

function yellow() {
	document.body.style.backgroundColor="yellow"
}

function lgreen() {
	document.body.style.backgroundColor="#00ff00"
}

<form>
	<input type="button" style="background-color:black" hover="background-color:#3e8e41" value="    " name="B1" onclick="black()" />
	<input type="button" style="background-color:blue" value="    " name="B2" onclick="blue()" />
	<input type="button" style="background-color:#ff00ff" value="    " name="B3" onclick="fuchsia()" />
	<input type="button" style="background-color:green" value="    " name="B4" onclick="green()" />
	<input type="button" style="background-color:#808000" value="    " name="B7" onclick="oil()" />
	<input type="button" style="background-color:purple" value="    " name="B5" onclick="purple()" />
	<input type="button" style="background-color:red" value="    " name="B6" onclick="red()" />
	<input type="button" style="background-color:#c44000" value="    " name="B8" onclick="orange()" />
	<input type="button" style="background-color:white" value="    " name="B9" onclick="white()" />
	<input type="button" style="background-color:brown" value="    " name="B10" onclick="brown()" />
	<input type="button" style="background-color:yellow" value="    " name="B11" onclick="yellow()" />
	<input type="button" style="background-color:#00ff00" value="    " name="B12" onclick="lgreen()" />
</form>

Answer 7

因此，我在网站上做了一个小按钮，您可以在其中更改页面的切换颜色：） HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Color Changes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>  
<div>
<button id="prvo">Click me!</button>





</div>
<script src="main.js"></script>
</body>
</html>

JavaScript：

 let prviBtn = document.getElementById('prvo');
let btn = document.querySelector('#prvo');
btn.addEventListener("click",function(){
document.body.classList.toggle('colored');
});

CSS：

.colored {
background-color: red;
}

这是最简单的方法，希望对您或任何尝试这样做的人有帮助：）

Answer 8

responseMock.headers().put("xxxxxx", headerValues);

You can see the full project on github

Answer 9

如果您希望能够定义一组颜色，甚至是一对颜色（例如，背景色+文本颜色），那么以下这些对我有用：

该示例显示了设置多种颜色的方法，但我在底部添加了有关更改单一颜色的更多细节

var background = document.querySelector("body");
var text = document.querySelector("h1")
var colorButton = document.querySelector(".myClass");
colorButton.addEventListener("click", colorChange);

function colorChange() {

  var colorSet = [{
      background: "#f7c5cc",
      text: "#cc313d"
    },
    {
      background: "#000",
      text: "#fff"
    },
    {
      background: "#fff",
      text: "#000"
    },
    {
      background: "#234e70",
      text: "#fbf8be"
    },
    {
      background: "#fcedda",
      text: "#ee4e34"
    },
  ];

  //to have the colors come in a random order
  var random = Math.floor(Math.random() * colorSet.length);

  //and then you would change each element individually
  background.style.backgroundColor = colorSet[random].background;
  text.style.color = colorSet[random].text;

  // if you wanted to just change the background, replace "var colorSet" with an array like this:
  //var colorSet = ["red", "orange", "yellow", "green", "#f7c5cc"];

  // and select the color like this:
  //background.style.backgroundColor = colorSet[random];

}

<html>

<body>
  <h1> Hi </h1>
  <button class="myClass">click me to change colors</button>
</body>

</html>

此方法的挑战在于，有时您会背对背获得相同的颜色（因为它们是随机选择的），因此看起来单击没有任何作用。 AZDeveloper的答案避免了这种情况，但是颜色始终是相同的顺序。

使用HTML页面中的按钮更改背景颜色（如何使用多于1种颜色）

9 个答案: