A javascript that can display a different image, every minute of the day
Question
I am very new at JavaScript. I am trying to do a javascript on a php page that can display one different photo from a folder every minute of the day. The folder contains 1440 images and are named accordingly so at 7:15 a file named 0715.jpg will be displayed. So far, I have this code (mostly suggested by user Blzn) who suggested a better approach than the one I was using.
<script type="text/javascript">
var previousImg = null;
function updateImage() {
var d = new Date();
var h = d.getHours().toString();
var m = d.getMinutes().toString();
if (h < 10) h = '0' + h;
if (m < 10) m = '0' + m;
var img = h + m + '.jpg';
if (previousImg !== img) {
var el = document.getElementById('image');
el.src = '/img/' + img;
previousImg = img;
}
}
//updateImage(); // call the first time
setTimeout("updateImage()", 30000); // update each 20 seconds
//function show_image(src, width, height, alt) {
// var img = document.createElement('img');
// img.src = '/img/' + img;
img.width = 800;
img.height = 400;
img.alt = "Hello.";
//}
document.body.appendChild(img);
window.onload=updateImage();
//}
</script>
</head>
I put this on the element and is called by
<img id='image' src='img/img.jpg' />
that I put on the HTML body of the page. As I sais, I'm very new at this and probably making a domb mistake. Please help!.
2 answers
solution1
0 2015-08-16 03:12:16
I am not sure about your purpose, but I made out my necessary assumption. The following code should work fine, it will append the image displayed every one minute, by assigning the right image.jpg
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript">
function updateImage() {
var d = new Date();
var h = d.getHours().toString();
var m = d.getMinutes().toString();
if (h < 10) {h = '0' + h};
if (m < 10) {m = '0' + m};
var img = h + m + '.jpg';
var el = document.getElementById('image');
var src = 'img/' + img;
el.setAttribute('src', src);
}
window.onload=function () {
// we create a variable to hold a reference to the img element
var img = document.getElementById('image');
// we change the img properties (attributes) as requried
img.width = 800;
img.height = 400;
img.alt = "Hello.";
//updateImage();
// we use the setInterval method to call the updateImage() function every 60000millisceonds = 60 seconds = 1minute
setInterval(updateImage(),60000);
}
//}
</script>
</head>
<body>
<img id="image" src=""/>
</body>
</html>
solution2
0 ACCPTED 2015-08-16 03:51:01
That's pretty simple!
Let's suppose we have an image in our html with the id myImg .
So, you call the setInterval function to change your image each 1min (setInterval expects a function that will be called and the time in ms).
The interval function must be called after the <img> tag is loaded in your html.
You can both put in a DOMContentLoad event or place the javascript code just after the tag in your html.
<img id="myImg" alt="Some image" src="0000.jpg" /> <script type="text/javascript"> setInterval(function() { var myImg = document.getElementById('myImg'); myImg.src = new Date().toTimeString().substring(0, 5).replace(':', '') + '.jpg'; }, 60000); </script>
So, we take the current HHmm and replaces the image's src property.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.