好吧，伙计们，我回来了另一个问题。 。 。
所以，这次我创建了一个很酷的html网页，其中包含我用Javascript创建的背景中的雪花。
我想要的是在一天的特定时间改变页面的背景颜色。例如：从早上4点到晚上11点，它是一种浅蓝色，从下午11点到下午6点，它会变成深蓝色，从下午6点到晚上9点，它会是一个非常深蓝色，最后从晚上9点到凌晨4点，它是黑色的。
这是代码，如果它有助于任何：
window.onload = function(){
//create canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//set canvas fullscreen
var W = window.innerWidth;
var H = window.innerHeight;
canvas.height = H;
canvas.width = W;
//generate snowflakes and atts
var mf = 100; //max flakes
var flakes = [];
//loop through empty flakes and apply atts
for(var i = 0; i < mf; i++){
flakes.push({
x: Math.random()*W, //set width of flake to random nr between 0 and 1 * width of screen
y: Math.random()*H, //set height of flake to random nr between 0 and 1 * height of screen
r: Math.random()*5+2, //set radius between 2 and 5
d: Math.random() + 1
})
}
//draw flakes
function drawFlakes(){
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "White";
ctx.beginPath();
for(var i = 0; i < mf; i++){
var f = flakes[i];
ctx.moveTo(f.x, f.y);
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
}
ctx.fill();
moveFlakes();
}
var angle = 0;
//move flakes
function moveFlakes(){
angle += 0.01;
for(var i = 0; i < mf; i++){
var f = flakes[i];
f.y += Math.pow(f.d, 2) + 1;
f.x += Math.cos(angle)*2;
if(f.y > H){
flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
}
}
}
setInterval(drawFlakes, 25);
}body {
background-color: lightSeaGreen;
z-index: -9999;
}<!DOCTYPE html>
<html>
<head>
<script src="JsSnow.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="myBody">
<canvas id="myCanvas"></canvas>
</body>
</html>我已更改您的功能以获取当天的当前小时数（0-24）并相应地设置背景。希望这有助于您找到答案。
window.onload = function(){
var hour = (new Date()).getHours(); // get the current hours (0-24)
var bg = document.getElementById('myBody'); // grab the bg obj
if (hour > 10){ // if its past 10am
bg.style.backgroundColor = 'red'; // set the bg color
} else if (hour > 14){ // if its past 2pm
bg.style.backgroundColor = 'blue';
}
//create canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//set canvas fullscreen
var W = window.innerWidth;
var H = window.innerHeight;
canvas.height = H;
canvas.width = W;
//generate snowflakes and atts
var mf = 100; //max flakes
var flakes = [];
//loop through empty flakes and apply atts
for(var i = 0; i < mf; i++){
flakes.push({
x: Math.random()*W, //set width of flake to random nr between 0 and 1 * width of screen
y: Math.random()*H, //set height of flake to random nr between 0 and 1 * height of screen
r: Math.random()*5+2, //set radius between 2 and 5
d: Math.random() + 1
})
}
//draw flakes
function drawFlakes(){
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "White";
ctx.beginPath();
for(var i = 0; i < mf; i++){
var f = flakes[i];
ctx.moveTo(f.x, f.y);
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
}
ctx.fill();
moveFlakes();
}
var angle = 0;
//move flakes
function moveFlakes(){
angle += 0.01;
for(var i = 0; i < mf; i++){
var f = flakes[i];
f.y += Math.pow(f.d, 2) + 1;
f.x += Math.cos(angle)*2;
if(f.y > H){
flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
}
}
}
setInterval(drawFlakes, 25);
}body {
background-color: lightSeaGreen;
z-index: -9999;
}<!DOCTYPE html>
<html>
<head>
<script src="JsSnow.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="myBody">
<canvas id="myCanvas"></canvas>
</body>
</html>这样的事情应该有效：
var time = new Date().getHours()
var opt = [
'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red'
]
document.querySelector('body').style.background = opt[time-1]将此块添加到javascript应该可以完成工作。获取当天的小时并相应地分配背景颜色。
var date = new Date();
var hours= date.getHours();
if(hours > 4 && hours < 11){
document.body.style.backgroundColor = "#7EC0EE";
}else if (hours > 11 && hours < 17){
document.body.style.backgroundColor = "#7e9cee";
}else if(hours > 17 && hours < 21){
document.body.style.backgroundColor = "#0d41d0";
}else{
document.body.style.backgroundColor = "#030815";
}
只需要一个单独的功能，每分钟运行一次，并根据需要更改背景颜色
setInterval(()=>{
//get color from time of day
document.querySelector('body').style.background = color;
}, 60000);