Question

我有一个网络摄像头，ftp每3分钟上传一张图片。我需要一个脚本来刷新此图像并显示最后一个图像的创建日期和时间。时间。

我尝试了以下代码，但没有显示日期时间

<HTML>
  <head>
    <script type="text/javascript">

    function refreshIt(){
      url='image_1.jpg';
      try{
        var Oxml= new window.XMLHttpRequest();
        Oxml.open("HEAD", url, false);
        Oxml.send(null);
        if(Oxml.status== 200){
           var lastMod = new Date(Oxml.getResponseHeader('Last-Modified')).toLocaleString();
           document.getElementById('getImageDate').innerHTML=lastMod;
           document.images['webcam'].src =url + '?' +  Math.random();
        }
      }
      catch(e){}
      setTimeout('refreshIt()',180000); // refresh every 3 minutes
    </script> 
  </head>

  <body onload="setTimeout('refreshIt()',180000)">
    <div align="center">
       <img id="webcam" src="image_1.jpg" alt="webcam" />
       <p><span id="getImageDate">Photo Timestamp</span></p>
    </div>
  </body>
</HTML>

Answer 1

<HTML>
  <head>
    <script type="text/javascript">  

function ShowCurrentTime() {
var dt = new Date();
document.getElementById("lblMessage").innerHTML = dt.toLocaleTimeString();
window.setTimeout("ShowCurrentTime()", 1000); // Here 1000(milliseconds) means one 1 Sec  
}

        function AutoReloader(picName, picSource) { // HTML name, IMG src
            if (document.images && document.images[picName]) { // test for script support
                var day = new Date(); // current date and time
                var n = day.getYear() + day.getMonth() + day.getDate() + day.getTime();
                var tag = document.images[picName]; // shortcut the original image object
                var newPic = new Image(tag.width, tag.height); // create image instance
                var ary = picSource.split("?pic", 1); // get image address
                newPic.src = ary[0] + "?pic" + n; // load new image with query
                tag.src = newPic.src; // display new image
                var txt = "Web camera image for "
   + day.getMonth() + "/" + day.getDate() + "/" + day.getYear() + " at "
   + day.getHours() + ":" + ((day.getMinutes() < 10) ? "0" : "") + day.getMinutes()
   + ":" + ((day.getSeconds() < 10) ? "0" : "") + day.getSeconds() + ".";
                tag.alt = txt; tag.parentNode.title = txt; // update image and div text
             document.getElementById("lblMessage").innerHTML = txt;
            }
        }
        function updatePic(picName, picSource, timer) { // HTML name, IMG src, time in seconds
            setInterval("AutoReloader('" + picName + "','" + picSource + "')", timer * 1000);
        }   
</script> 
  </head>

  <body onload="ShowCurrentTime()">
    <div align="center">
      <p align="center" title="Web camera image."><img alt="Web camera image." src="ImageSource" name="UniqueName" width="ImageWidth" height="ImageHeight" onload="updatePic(this.name,this.src,RefreshTime);" /> <label id="lblMessage" ForeColor="Red"></label></p>
    </div>
  </body>
</HTML>

显示网络摄像头上传的图像和日期时间

1 个答案: