Want to make a site that automatically displays a different background image for each day of the year
I'm trying to build a site that will look up the date in PHP and then build the page with a unique background image for each day of the year. All of the other content would be the same for every day.
Not sure if 开发者_JAVA百科this can be one page that pulls the right background image for each date, or if I need to redirect to a different page altogether for each day?
Can anyone help?
You could do something like this in php:
$backgrounds = array(
'bg0.jpg',
'bg1.jpg',
'bg2.jpg',
// ...
'bg365.jpg');
$todaysBackground = strtotime('today') % count($backgrounds);
And then in CSS:
body {
background-image: url('images/<?php echo $todaysBackground; ?>');
}
Then would change your backgrounds in cycle.
Another option if you have images for all the days in a year:
$today = (int)date('z');
$todaysBackground = $today . '.jpg';
You could use an array to define images for their corresponding dates. Better yet, if you have 365 images whose names follow the format of the string output by date(), you wouldn't even need the array. You could just do (for a method utilizing JavaScript):
body.style.backgroundImage="" + date([parameters]) + ".png";
(I believe that's valid syntax; it's been a while)
See if either works. And by the way, you don't have to have the entire date string as the image name- just what you need. I realize the latter does propose an inconvenience if they aren't already named in the format of the date string.
For a method using PHP, a simple echo($date([params]).".jpg"); could be used.
Your best bet is doing for the CSS:
body {
background-image: url('images/get_todays_background.php');
}
This will load the script and whatever is output to the browser from it as your image.
In the script get_todays_background.php:
<?php
$now = date('Y-m-d');
header('Content-Type: image/jpeg');
readfile('/folder_of_backgrounds/'.$now.'.jpg');
?>
This will output the image as an image file in the script. Then you would just put a picture in the folder for each day in the format of 2011-03-21. This equates to March 21'st 2011. Magic. Be sure to set a default picture and do some error checking to see if the current picture exists first (hint, file_exists()).
You can use an inline style sheet in the head of your page to do this fairly easily. Put all your images in a folder (I've called it dailybackgrounds but you can use any name you want) with filenames 0.png - 365.png (the PHP date() function returns the day of the year as 0 for the first, 1 for the second, etc).
<style type="text/css">
body {
background-image: url("/images/dailybackgrounds/<?php echo (date('z'));?>.png");
}
</style>
Note, this should be the only thing you put inline. Put the rest of your styling in your external CSS file as usual.
Another solution would be to use PHP to give the <body> element a class, and then use CSS to define all your background styles. The advantage of this is that you can then define other styles that happen on certain days of the year.
For example:
<body class="day-<?= date('z') ?> month-<?= date('m') ?>">
Then you can have CSS styles such as:
body.day-1 {
background: url('happy-new-year.jpg');
}
body.month-12 {
background: url('merry-christmas.jpg');
}
加载中,请稍侯......
精彩评论