javascript 可以在一天中的每一分钟显示不同的图像

Question

我是 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 正文中。正如我所说，我对此很陌生，可能犯了一个愚蠢的错误。请帮忙！

Answer 1

我不确定你的目的，但我做出了必要的假设。下面的代码应该可以正常工作，它会附加每分钟显示的图像，通过分配正确的 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>

Answer 2

这很简单！

假设我们的 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 可以在一天中的每一分钟显示不同的图像

A javascript that can display a different image, every minute of the day

javascript

image

clock