Question

好的，伙计我回来了另一个问题。。

所以，这次我创建了一个很酷的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（）尝试了很多东西，但没有一个工作!!!

Answer 1

I have changed your function to get the current Hours in the day (0-24) and set the background accordingly. Hopefully this helps you find your answer.

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>

Answer 2

something like this should work:

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]

Answer 3

将此块添加到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";
  }

Answer 4

Just have a separate function that runs every minute and change background color as needed

setInterval(()=>{
  //get color from time of day
  document.querySelector('body').style.background = color;
}, 60000);

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

4 个答案: