javascript 可以在一天中的每一分钟显示不同的图像
A javascript that can display a different image, every minute of the day
我是 JavaScript 的新手。我正在尝试在 php 页面上做一个 javascript,它可以在一天中的每一分钟显示一个文件夹中的一张不同照片。该文件夹包含 1440 张图像并相应地命名,因此在 7:15 处将显示一个名为 0715.jpg 的文件。
到目前为止,我有这段代码(主要是由用户 Blzn 建议的),他提出了一种比我使用的更好的方法。
<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>
我把它放在元素上并被调用
<img id='image' src='img/img.jpg' />
我放在页面的 HTML 正文中。
正如我所说,我对此很陌生,可能犯了一个愚蠢的错误。请帮忙!
我不确定你的目的,但我做出了必要的假设。
下面的代码应该可以正常工作,它会附加每分钟显示的图像,通过分配正确的 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>
这很简单!
假设我们的 html 中有一张图像,其 ID 为 myImg
。
因此,您调用 setInterval
函数每 1 分钟更改一次图像(setInterval 需要一个将被调用的函数和以毫秒为单位的时间)。
必须在 将 <img>
标记加载到您的 html 后调用间隔函数。
您既可以放入 DOMContentLoad
事件,也可以将 javascript 代码放在 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>
因此,我们采用当前的 HHmm 并替换图像的 src
属性。
我是 JavaScript 的新手。我正在尝试在 php 页面上做一个 javascript,它可以在一天中的每一分钟显示一个文件夹中的一张不同照片。该文件夹包含 1440 张图像并相应地命名,因此在 7:15 处将显示一个名为 0715.jpg 的文件。 到目前为止,我有这段代码(主要是由用户 Blzn 建议的),他提出了一种比我使用的更好的方法。
<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>
我把它放在元素上并被调用
<img id='image' src='img/img.jpg' />
我放在页面的 HTML 正文中。 正如我所说,我对此很陌生,可能犯了一个愚蠢的错误。请帮忙!
我不确定你的目的,但我做出了必要的假设。 下面的代码应该可以正常工作,它会附加每分钟显示的图像,通过分配正确的 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>
这很简单!
假设我们的 html 中有一张图像,其 ID 为 myImg
。
因此,您调用 setInterval
函数每 1 分钟更改一次图像(setInterval 需要一个将被调用的函数和以毫秒为单位的时间)。
必须在 将 <img>
标记加载到您的 html 后调用间隔函数。
您既可以放入 DOMContentLoad
事件,也可以将 javascript 代码放在 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>
因此,我们采用当前的 HHmm 并替换图像的 src
属性。