我一直在尝试查看是否可以创建一个循环背景,按照出现的顺序在列表中从一种颜色更改为另一种颜色。(颜色为:红色、橙色、黄色、绿色、蓝色和紫色。我希望它能起作用,并为页面提供"彩虹"类型的外观。我认为将HTML与JavaScript混合会起作用,但它显然似乎只显示文本,甚至第一次背景更改也不起作用。
代码为:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
function Red() {
bgcolor Red;
ColorOrange();
}
function Orange() {
bgcolor Orange;
ColorYellow();
}
function Yellow() {
bgcolor Yellow;
ColorGreen();
}
function Green() {
bgcolor Green;
ColorBlue();
}
function Blue() {
bgcolor Blue;
ColorPurple();
}
function Purple() {
bgcolor Purple;
ColorRed();
}
function ColorRed()
{
setTimeout("Red", 1000);
}
function ColorOrange()
{
setTimeout("Orange", 1000);
}
function ColorYellow()
{
setTimeout("Yellow", 1000);
}
function ColorGreen()
{
setTimeout("Green", 1000);
}
function ColorBlue()
{
setTimeout("Blue", 1000);
}
function ColorPurple()
{
setTimeout("Purple", 1000);
}
</script>
There is text here, but it's sorta not related to this so I replaced it with this!
</BODY>
</HTML>
我认为最简单的解决方案是将颜色放在一个数组中。您可以简单地遍历数组并使用 setInterval 函数每秒更改颜色。
(function() { // Wrap in a function to not pollute the global scope
// Colors. These are the color names you can use in CSS. You could use color codes
// like #rrggbb as well.
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var colorIndex = 0;
setInterval(function(){
// Set the color and increment the index.
document.body.style.backgroundColor = colors[colorIndex++];
// Wrap the index if it goes past the length of the array. % is modulo.
colorIndex %= colors.length;
}, 1000);
})();
没有必要
使用 Java。
将此添加到任何标签:
style="linear-gradient(red,orange,yellow,green,cyan,blue,magenta)"
我写了这个很酷的代码来做到这一点。还有在github上。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rainbow Background</title>
</head>
<body>
<script>
let r = 255
let g = 0
let b = 0
function rgb(r, g, b){
return "rgb("+r+","+g+","+b+")"
}
function myTimer () {
if (r < 255 && g == 0 && b == 0) {
r++
} else if (r == 255 && g < 255 && b == 0) {
g++
} else if (r > 0 && g == 255 && b == 0) {
r--
} else if (r == 0 && g == 255 && b < 255) {
b++
} else if (r == 0 && g > 0 && b == 255) {
g--
} else if (r < 255 && g == 0 && b == 255) {
r++
} else if (r == 255 && g== 0 && b > 0) {
b--
}
document.body.style.backgroundColor = rgb(r, g, b)
}
setInterval(myTimer, 10)
</script>
</body>
</html>
你可能会喜欢这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height:100%;
width:100%;
padding:0;
margin:0;
display: grid;
grid-auto-flow: column;
}
</style>
</head>
<body>
<script>
let CI=0;
let PI=2;
const saturation = 0;// max 255
const value = 255;// max 255
let CC=[saturation,saturation,value];
for(i=1;i=1;){
if(CC[CI]<value){
CC[CI]++;
var div = document.createElement('div');
div.id = `${CC[0]},${CC[1]},${CC[2]}`;div.className = "part";
document.querySelector("body").appendChild(div);
document.getElementById(`${CC[0]},${CC[1]},${CC[2]}`).setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
} else if(CC[PI]>saturation){
CC[PI]--;
var div = document.createElement('div');
div.id = `${CC[0]},${CC[1]},${CC[2]}`;div.className = "part";
document.querySelector("body").appendChild(div);
document.getElementById(`${CC[0]},${CC[1]},${CC[2]}`).setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
} else {
PI=CI;
if(CI<2){
CI++;
}else{
break;
}
}
}
</script>
</body>
</html>
或者这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let CI=0;
let PI=2;
const saturation = 0;
const value = 255;
let CC=[saturation,saturation,value];
count=0;
let loop = setInterval(function(){
if(CC[CI]<value){
CC[CI]++;
} else if(CC[PI]>saturation){
CC[PI]--;
} else {
PI=CI;
if(CI<2){
CI++;
}else{
CI=0;
}
}
document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
},1);
</script>
</body>
</html>