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，所以在這方面我很新，可能會犯一個愚蠢的錯誤。請幫忙！。

來源

2015-08-16 theShader

問題是什麼？什麼不行？ – 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財產。

來源

2015-08-16 03:51:01 Buzinas

我不確定你的目的，但我做出了我的必要假設。下面的代碼應該可以正常工作，它會追加顯示的圖像每隔一分鐘，通過分配權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>

來源

2015-08-16 03:12:16

JavaScript可以顯示不同的圖像，每天的每一分鐘

回答

相關問題