Question

基本上，我有一个脚本可以根据时间更改页面背景。

<script language="JavaScript">
day=new Date()     //..get the date
x=day.getHours()    //..get the hour

if(x>=0 && x<4) {

   document.write('<style type="text/css">#header{background: white url(images/assets/1st.jpg); color: black}"></style>')

} else

if(x>=4 && x<12) {

   document.write('<style type="text/css">#header{background: white url(images/assets/2nd.jpg); color: black}"></style>')

} else

if(x>=12 && x<18) {

   document.write('<style type="text/css">#header{background: white url(images/assets/3rd.jpg); color: black}"></style>')

} else

if (x>=18 && x<24) {

   document.write('<style type="text/css">#header{background: white url(images/assets/4th.jpg); color: black}"></style>')

}

正如您所看到的，第一个背景在凌晨4点之间发生变化，依此类推。

我要做的是每天在不同时间更改背景，阅读某种文本文件或其他内容。例如，在6月10日，第一个背景在凌晨4:15变化，其他背景在不同时间变化，在6月11日，第一个背景在凌晨4:22变化，或者等等。

有人可能找到我或给我写点什么吗？我什么都找不到！

非常感谢

Answer 1

让我们首先以更现代的形式重写脚本（即使用不被弃用的脚本标记，声明变量......），并将设置放在数组中以使其更易于配置：

<script type="text/javascript">

var now = new Date();
var date = (now.getMonth() + 1) * 100 + now.getDate();
var time = now.getHours() * 100 + now.getMinutes();

var settings = [
  { date: 1224, time: 2400, image: 'xmas.jpg'}, // all christmas eve
  { date: 704, time: 2400, image: 'bang.jpg'}, // all fourth of july
  // any other day:
  { date: -1, time: 400, image: '1st.jpg'},
  { date: -1, time: 1200, image: '2nd.jpg'},
  { date: -1, time: 1800, image: '3rd.jpg'},
  { date: -1, time: 2400, image: '4th.jpg'}
];

var setting;
for (var i = 0; i < settings.length; i++) {
  var s = settings[i];
  if ((s.date == -1 || s.date == date) && time < s.time) {
    setting = settings[i];
    break;
  }
}

document.write('<style type="text/css">#header{background: white url(images/assets/'+setting.image+'); color: black}</style>');

</script>

注意：我在样式表代码中删除了一个spurios ">。

编辑：

我添加了处理日期的代码，并简化了时间格式。在设置结束时，您的项目date: -1适用于设置中较早的任何日期。

Answer 2

在服务器上，将文件放置为JSON或XML格式，并提供有关后台更改的信息。

例如：（file：http://example.com/bg.json）

{
    "default": {
        "00:00": "http://example.com/image1.png",
        "04:00": "http://example.com/image2.png",
        "10:00": "http://example.com/image3.png",
        "18:00": "http://example.com/image4.png",
    },
    // In format DD/MM/YYYY
    // This means that every Christmast (every year)
    "24/12" : {
        "00:00": "http://example.com/mary-xmas.png"
    },
    // and so on ...
}

接下来你将通过jQuery json（ajax）页面加载这个文件的网址是例如http://example.com/index.html：

$(function() {
      $.ajax({
          url: 'bg.json',
          type: 'json',
          success: function(data) {
              // In data you have complete object, you can easily parse it
              // and create timer to change the background 
          }
      });
  });

要改变背景而不是使用它：

$('#header').css('background', 'white url(...) scroll no-repeat 0 0');

Thi exaple需要jQuery，但要将它重写为纯JavaScript或其他框架（如Prototype或Mootools）并不难。

希望它有所帮助。

Javascript根据时间改变图像

2 个答案:

编辑：