到目前为止，我可以在我的页面上获取我的背景颜色，以便在我单击按钮时更改，但仅限于1种颜色。
我希望能够一直点击按钮，每次都能获得不同的颜色，或者至少有一些不同的预设颜色。
这就是我刚才所拥有的。
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction()
{
document.body.style.backgroundColor= "green";
}
</script>
你可以用引导程序改变按钮的颜色，通过这个;
更改颜色为红色更改颜色为蓝色更改颜色为绿色更改颜色为黄色
<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之间的随机数，然后只需切换即可
这是你想要的一个例子。
<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> an iddocument.getElementById('body')) and make it change the background color (document.getElementById('body').style.background = colors[colorIndex])试试这个
function myFunction(){
var colors = ["green", "black","yellow"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
$("body").css("background-color", selectedColor);
}
您可以使用您想要使用的任何颜色。把它们放进阵列。你也可以像"#F4F5F3"一样使用颜色代码。
您可以使用随机颜色生成器：
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;
}
然后传递生成的颜色作为背景颜色。
你可以尝试使用这样的东西。它具有您想要的任何颜色的软转换动画。
$(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>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>所以我在网站上做了一个小按钮，你可以在页面上改变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的：
let prviBtn = document.getElementById('prvo');
let btn = document.querySelector('#prvo');
btn.addEventListener("click",function(){
document.body.classList.toggle('colored');
});
CSS：
.colored {
background-color: red;
}
这是最简单的方式，我希望这可以帮助你或任何人试图这样做:)
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;
}
}