Question

当我尝试运行下面的代码时，浏览器不显示图像，而是显示：[object HTMLImageElement]。

我想制作一个时钟，每分钟显示一张不同的照片（妻子的东西）。我开始创建一个从浏览器的时钟中查找日期的函数，将其转换为字符串值，这将是文件名。在加载网页并每秒更新一次功能时调用该函数。有一个标签带有标签id的标签，应显示最终结果。

我的所有照片都存储在一个名为images的文件中照片的编号从0000.jpg到2359.jpg（以匹配一天中的时间）

我无法弄清楚我做错了什么。我尽力评论代码的每一行，所以也许这将有助于任何答案。

<html>
<head>
<script language="javascript" type="text/javascript">

//function to get and update the picture file based on the user's clock
function updatePicture ()
{

//variable for getting the date on the user's clock
var clockTime = new Date ();

//variables for showing just the hours and minutes
var hours = clockTime.getHours();
var minutes = clockTime.getMinutes();

//add leading zeros to hours and minutes under 10
hours = ( hours < 10 ? "0" : "" ) + hours;
minutes = ( minutes < 10 ? "0" : "" ) + minutes;

//turn hours and minutes into string values
var hoursString = hours.toString();
var minutesString = minutes.toString();

//variable puts hours and minutes strings together to make a picture file name
var timeToPictureFile = hoursString + minutesString;

//variable to make a new image object
var pictureFile = new Image;

//adding <img> tag and.jpg with timeToPictureFile to make the file name and url call
pictureFile.src = '<img src="images/' + timeToPictureFile + '.jpg"/>';

//update the time display
document.getElementById('picture').firstChild.nodeValue = pictureFile;
}
</script>
</head>

<!-- load the picture and update the picture every second -->
<body onLoad="updatePicture(); setInterval('updatePicture()',1000)">

<!-- a div to hold the picture -->
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>

Answer 1

我认为您不能通过设置nodeValue来添加或更改子对象。将代码更改为：

<script language="javascript" type="text/javascript">

//function to get and update the picture file based on the user's clock
function updatePicture ()
{

    //variable for getting the date on the user's clock
    var clockTime = new Date ();

    //variables for showing just the hours and minutes
    var hours = clockTime.getHours();
    var minutes = clockTime.getMinutes();

    //add leading zeros to hours and minutes under 10
    hours = ( hours < 10 ? "0" : "" ) + hours;
    minutes = ( minutes < 10 ? "0" : "" ) + minutes;

    //turn hours and minutes into string values
    var hoursString = hours.toString();
    var minutesString = minutes.toString();

    //variable puts hours and minutes strings together to make a picture file name
    var timeToPictureFile = hoursString + minutesString;
    var pictureFileSrc = 'images/' + timeToPictureFile + '.jpg';

    // if pictureFile already exists, then just set the src on the image
    var pictureFileObj = document.getElementById("pictureFile");
    if (pictureFileObj) {
        pictureFileObj.src = pictureFileSrc;
    } else {
        //variable to make a new image object
        var pictureFile = new Image;
            pictureFile.id = "pictureFile";

        //adding <img> tag and.jpg with timeToPictureFile to make the file name and url call
        pictureFile.src = pictureFileSrc;
        document.getElementById('picture').appendChild(pictureFile);
    }
}
</script>

Answer 2

我的建议

<html>
<head>
<script language="javascript" type="text/javascript">
//function to get and update the picture file based on the user's clock
var oldImage = "";
function updatePicture () {
  //variable for getting the date on the user's clock
  var clockTime = new Date();
  //variables for showing just the hours and minutes
  var hours = clockTime.getHours();
  var minutes = clockTime.getMinutes();
  //add leading zeros to hours and minutes under 10
  hours = ( hours < 10 ? "0" : "" ) + hours;
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  //variable puts hours and minutes strings together to make a picture file name
  var timeToPictureFile = ""+hours + minutes +'.jpg';

  if (oldImage === timeToPictureFile) return; // no need to do this yet
  oldImage = timeToPictureFile; // save     
  //variable to make a new image object
  var pictureFile = new Image();
  pictureFile.src = timeToPictureFile; // preload the image;
  //update the time display - 
  // this could also be done changing an existing image's src attribute
  document.getElementById('picture').innerHTML = '<img src="'+pictureFile.src+'" />';
}

window.onload=function() {
  updatePicture(); 
  setInterval(updatePicture,1000); // check every second
}  
</script>
</head>


<body>
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>

OR

<html>
<head>
<script language="javascript" type="text/javascript">
//function to get and update the picture file based on the user's clock
function updatePicture () {
  //variable for getting the date on the user's clock
  var clockTime = new Date();
  //variables for showing just the hours and minutes
  var hours = clockTime.getHours();
  var minutes = clockTime.getMinutes();
  //add leading zeros to hours and minutes under 10
  hours = ( hours < 10 ? "0" : "" ) + hours;
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  //variable puts hours and minutes strings together to make a picture file name
  var timeToPictureFile = ""+hours + minutes +'.jpg';
  //update the time display
  document.getElementById('picture').innerHTML = '<img src="'+timeToPictureFile+'" />';
}

window.onload=function() {
  updatePicture(); 
  setInterval(updatePicture,60000); // check every minute
}  
</script>
</head>


<body>
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>

使用javascript问题显示图像

2 个答案: