Javascript 根据时间更改图像

Question

Basically, I've got a script which changes the page background depending on the time.

<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>')

}

So as you can see, the first background changes between at 4am and so on.

What I would look to do is to change the background at different times every day, reading from some sort of text file or something. For example, on the 10th June the first background changes at 4:15am and the others with different times, on the 11th June the first background changes at 4:22am or something and so on.

Could someone possibly find me or write me something to do this? I can't find anything anywhere!

Thanks ever so much

Answer 1

Let's start by rewriting the script in a more modern form (ie using a script tag that is not deprecated, declaring variables...), and putting the settings in an array to make it more configurable:

<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>

Note: I removed a spurios "> in the style sheet code.

Edit:

I added code for handling dates, and simplified the time format. At the end of the settings you have items with date: -1 which apply to any date that is not earlier in the settings.

Answer 2

On the server, place the file in a format such as JSON or XML with information about changes in the background.

For example something like this: (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 ...
}

Next you wil load this file by jQuery json (ajax) page's url is for example 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 
          }
      });
  });

And for changing background rather use this:

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

Thi exaple needs jQuery, but it is not too hard to rewrite it to pure JavaScript or to another framework like Prototype or Mootools.

Hope it helps.