如何在Javascript中使页面的背景颜色在一天中的某个时间发生变化

How to make the background color of a page change at a certain time of the day in Javascript?

本文关键字：时间 变化 一天 颜色 背景 Javascript      更新时间：2023-09-26

好了，伙计们，我回来了，还有一个问题。

所以，这次我创建了一个很酷的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>
我使用getHours（）尝试了很多方法，但都没有成功！！！

我已经更改了您的函数，以获取当天（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);
相关文章：