首页使用JavaScript编写程序实现按时间随机变化的网页图片背景的完整HTML代码

使用JavaScript编写程序实现按时间随机变化的网页图片背景的完整HTML代码

时间: 2024-03-22 14:37:18 浏览: 76

好的，以下是使用JavaScript实现按时间随机变化的网页图片背景的完整HTML代码： ``` <!DOCTYPE html> <html> <head> <title>按时间随机变化的网页图片背景</title> <style> body { background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("default.jpg"); /* 初始背景图片 */ } </style> </head> <body> <script> function changeBackground() { var date = new Date(); // 获取当前时间 var hours = date.getHours(); // 获取当前小时数 var body = document.getElementsByTagName("body")[0]; // 获取body元素 if (hours >= 6 && hours < 12) { // 6:00-12:00 body.style.backgroundImage = "url('morning.jpg')"; // 早上的图片 } else if (hours >= 12 && hours < 18) { // 12:00-18:00 body.style.backgroundImage = "url('afternoon.jpg')"; // 下午的图片 } else if (hours >= 18 && hours < 24) { // 18:00-24:00 body.style.backgroundImage = "url('evening.jpg')"; // 晚上的图片 } else { // 0:00-6:00 body.style.backgroundImage = "url('night.jpg')"; // 夜晚的图片 } } changeBackground(); // 初始调用一次 setInterval(changeBackground, 1000); // 每隔1秒调用一次 </script> </body> </html> ``` 此代码会根据当前时间随机变换网页背景图片，每隔1秒调用一次`changeBackground()`函数进行更新。具体实现方式是根据当前小时数判断当前时间段，并设置不同的背景图片。在此代码中，分别设置了早上、下午、晚上、夜晚四张图片，您可以根据需要自行修改。注意，图片路径必须正确，否则无法显示图片。

阅读全文