使用 HTML 页面中的按钮更改背景颜色（如何使用超过 1 种颜色）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21663003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background color with button in HTML page (how to use more than 1 color)
提问by Tando
So far I can get my background color on my page to change when I click the button but only to the 1 set color.
到目前为止，当我单击按钮时，我可以更改页面上的背景颜色，但只能更改为 1 组颜色。
I want to be able to keep clicking on the button and get a different color each time or at least a handful of different preset colors.
我希望能够一直点击按钮并每次获得不同的颜色或至少几种不同的预设颜色。
This is what I have just now.
这就是我现在所拥有的。
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction()
{
document.body.style.backgroundColor= "green";
}
</script>
回答by daphnieandam
you can change the colors of your button with bootstrap, through this;
您可以通过引导程序更改按钮的颜色；
Change Color for red Change Color for blue Change Color for green Change Color for yellow
更改颜色为红色 更改颜色为蓝色 更改颜色为绿色 更改颜色为黄色
回答by AzDeveloper
This is a example, of what you want.
这是一个例子，你想要什么。
<html>
<head>
<script>
var colors = ["red", "blue", "green"];
var colorIndex = 0;
function changeColor() {
var col = document.getElementById("body");
if( colorIndex >= colors.length ) {
colorIndex = 0;
}
col.style.backgroundColor = colors[colorIndex];
colorIndex++;
}
</script>
<body id='body'>
<button onclick="changeColor();">Change color</button>
</body>
</html确定公司运作
<body><body>的idid2.Make按钮上点击呼叫功能。
3.使用id(
document.getElementById('body')document.getElementById('body'))调用body并使其改变背景颜色( document.getElementById('body').style.background = colors[colorIndex]document.getElementById('body').style.background = colors[colorIndex])希望对您有所帮助。
回答by simonkaspers1
<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>
This function should work. First generate a random number between 1 and 10, and just have switch with the changing
这个功能应该可以工作。首先生成一个 1 到 10 之间的随机数，然后切换
回答by LoneChaos
You can use a random color generator:
您可以使用随机颜色生成器：
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;
}
and then pass the colour generated as your background colour.
然后传递生成的颜色作为背景颜色。
回答by Vlad Yultyyev
You can try to use something like this. It have a soft-transition animations with any colors you want.
你可以尝试使用这样的东西。它具有您想要的任何颜色的软过渡动画。
$(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();
});
});body{
background-color: grey;
transition:background-color 0.5s ease;
}
.clicked {
background:lightgreen;
}<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>回答by Sachin
Try this
尝试这个
function myFunction(){
var colors = ["green", "black","yellow"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
$("body").css("background-color", selectedColor);
}
You can use whatever color you want to use. Just put them into array. You can also use the color codes as well like "#F4F5F3".
您可以使用任何您想使用的颜色。只需将它们放入数组即可。您也可以使用颜色代码，例如"#F4F5F3"。
回答by Aladdin
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>回答by Dremiq
So i made a little button on the site where u can change TOGGLE colors on your page :) HTML:
所以我在网站上做了一个小按钮，你可以在其中更改页面上的 TOGGLE 颜色:) 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:
JavaScript：
let prviBtn = document.getElementById('prvo');
let btn = document.querySelector('#prvo');
btn.addEventListener("click",function(){
document.body.classList.toggle('colored');
});
CSS:
CSS：
.colored {
background-color: red;
}
This is the most simple way i hope this help you or whoever is trying to do this :)
这是最简单的方法，我希望这对您或任何尝试这样做的人有所帮助:)
回答by Dom58
var isBlack = 0;
function changeBackground() {
if (isBlack == 0){
var backgr = document.getElementById('bg').style="background-color:#52b0d6; color:white;";
document.getElementById('selectback').innerHTML="CHANGE WEB BACKGROUND COLOR... (#2)";
document.getElementById('selectback').style="background-color:#464141;";
isBlack=true;
isBlack= 1;
}
else{
var dftBg = document.getElementById('bg').style="background-image:url('issets/images/backgrnd.jpg'); color:white;";
document.getElementById('selectback').innerHTML="RESTORE TO DEFAULT BACKGROUND COLOR... (#3)";
document.getElementById('selectback').style="background-color:black;";
document.getElementById('centered').style="background-color:#464141;";
isBlack=true;
isBlack= 0;
}
}
