好的，各位，我带着另一个问题回来了。 。 .
所以，这次我创建了一个很酷的 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>关于javascript - 如何在Javascript中使页面的背景颜色在一天中的特定时间改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38645980/