如何使用JavaScript在一天中的特定时间更改页面的背景颜色？
[英]How to make the background color of a page change at a certain time of the day in Javascript?
问题描述
好的，伙计们，我回来了另一个问题。 。 。
因此，这一次，我创建了一个很酷的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(fx, fy); ctx.arc(fx, fy, fr, 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]; fy += Math.pow(fd, 2) + 1; fx += Math.cos(angle)*2; if(fy > H){ flakes[i] = {x: Math.random()*W, y: 0, r: fr, d: fd}; } } } 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>
4 个解决方案
解决方案1
3 已采纳 2016-07-28 20:25:22
我已经更改了您的功能，以获取一天中的当前小时数（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(fx, fy); ctx.arc(fx, fy, fr, 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]; fy += Math.pow(fd, 2) + 1; fx += Math.cos(angle)*2; if(fy > H){ flakes[i] = {x: Math.random()*W, y: 0, r: fr, d: fd}; } } } 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>
解决方案2
1 2016-07-28 20:24:36
这样的事情应该工作：
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]
解决方案3
1 2016-07-28 20:40:45
将此块添加到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";
}
解决方案4
-1 2016-07-28 20:26:14
只需拥有一个单独的功能，该功能每分钟运行一次并根据需要更改背景颜色
setInterval(()=>{
//get color from time of day
document.querySelector('body').style.background = color;
}, 60000);
在特定时间段内使用JavaScript更改HTML元素的背景颜色？
[英]Change background color of HTML elements with JavaScript in a certain time period?
如何在div更改时使一个页面网站的背景颜色发生变化？
[英]How to make one page website with background color change on div change?
如何制作一个每次点击都会改变背景颜色的循环？
[英]How to make a cycle that change the background color every time I click on it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.