JavaScript可以显示不同的图像，每天的每一分钟

问题描述：

我是JavaScript非常新的。我试图在php页面上做一个javascript，可以在一天中的每一分钟显示一个文件夹中的一张不同的照片。该文件夹包含1440个图像并相应命名，因此在7:15会显示一个名为0715.jpg的文件。到目前为止，我有这个代码（主要由用户Blzn建议），他们提出了比我使用的更好的方法。JavaScript可以显示不同的图像，每天的每一分钟

<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正文调用。因为我是sais，所以在这方面我很新，可能会犯一个愚蠢的错误。请帮忙！。

问题是什么？什么不行？ – Pointy

我会使用'setInterval（“updateImage（）”，1000）'而不是'setTimeout（）'来重复这个动作。 –

答

这很简单！

让我们假设我们有一个图像在我们的HTML与编号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财产。

答

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

JavaScript可以显示不同的图像，每天的每一分钟

相关推荐