Change image by current time
I have two images. I want to display one image if its day and another if it night. This should be done 开发者_高级运维using javascript. For example display one image from 8:00 to 00:00 and another from 00:00 to 8:00. Is that possible using javascript?
var img = document.createElement('img');
calcSrc();
setInterval(calcSrc, 60000);
document.body.appendChild(img); // place image
function calcSrc() {
img.src = new Date().getHours() < 8 ? 'night.jpg' : 'day.jpg';
}
You could use a setInterval() that runs every so often. How accurate you want it to be is up to you.
In this example, it runs every minute:
HTML
<img id='theImage' src='images/day.jpg' />
javascript
// setInterval makes the code run every xx milliseconds
// if you just want it to run, delete this top line,
// and the last line
setInterval(function() {
// Create a new Date object with the current date/time
var date = new Date();
// Get a reference to the image in the HTML using its ID attribute
var img = document.getElementById('theImage');
// getHours() gets the hour of the day from 0 - 23,
// so the way it is set up, if the hour is less
// than 8, the first block will run, otherwise
// the second block will run
if (date.getHours() < 8) {
// This simply checks the src attribute of the image to see
// if it already contains the word "night". That way we
// don't update the src unless we need to.
// You could also eliminate this check if you're not going
// to use setInterval.
if( img.src.indexOf('night') < 0 ) {
// So if the hour is less than 8, and the
// src did not contain "night", then we need
// to change the src to the "night" image.
img.src = 'images/night.jpg'
}
} else {
// Same as above, only it executes if the hour was greater
// than 8.
// Again, you could eliminate the check for the word
// "day" if you're not going to use setInterval.
if( img.src.indexOf('day') < 0 ) {
img.src = 'images/day.jpg'
}
}
// Run the setInteval every 60000 milliseconds
// Delete this line as well if you're not using setInterval
},60000);
You can get rid of the setInterval() if you don't need it to change when the clock changes. (Only happens twice a day, so the setInterval() may be overkill.)
If that's the case, just delete the first and last lines. Then it will just run when the page loads.
EDIT: From your comment, if you were to change the interval from 15:00 to 16:00 (and vice versa), you would just change the if() that tests the hour to this:
if(date.getHours() < 15 || date.getHours() >= 16) {
// set one image
} else {
// set the other image
}
EDIT: To modify a div's class instead of an image's src, do this:
Change the getElementById() line to point to your <div>, like:
var div = document.getElementById('theDiv');
Then update the className attribute instead of src, as in:
div.className = "someNewClass";
Please note that this will overwrite the entire class attribute, so if your element has several classes, we'll need to be a little more careful about adding/removing the class.
If you're keeping the code that tested the image to see if it already had the proper image, then you would do something similar for the div:
if(div.className.indexOf('someUniqueWord') < 0) {...
Again, you don't need to do these checks. It just makes it so that the element is not modified unless absolutely necessary.
If you give the image an ID then you can modify it's src property depending on the time of the user's browser.
I am quite surprised about a few things in your code, J-P
- calcSrc without quotes and brackets, e.g. 'calcSrc()'
- img keeps its handle after being placed in the document.
e.g.
<html>
<head>
<script>
var img,tid;
window.onload=function() {
img = document.createElement('img');
calcSrc();
tId=setInterval(calcSrc, 60000);
document.body.appendChild(img); // place image
}
var day = 'day.jpg'
var night = 'night.jpg'
function calcSrc() {
img.src = (new Date.getHours()<8)?night:day;
}
</script>
</head>
<body>
</body>
</html>
加载中,请稍侯......
精彩评论