显示带有 javascript 问题的图像

Question

When I try to run the code below the browser does not display an image, instead it displays: [object HTMLImageElement].当我尝试运行下面的代码时，浏览器不显示图像，而是显示：[object HTMLImageElement]。

I want to create a clock that shows a different picture for every minute (thing for the wife).我想创建一个时钟，每分钟显示不同的图片（给妻子的东西）。 I started by making a function that finds the date from the browser's clock, turns it into string value which will be the file name.我首先制作了一个 function，它从浏览器的时钟中找到日期，将其转换为字符串值，即文件名。 The function is called when the webpage loads and the function is updated every second.网页加载时调用 function 并且每秒更新 function。 There is a tag with a tag id call, where the final result should be displayed.有一个带有标签 id 调用的标签，应该在其中显示最终结果。

All my pictures are stored in a file called images The photos are numbered from 0000.jpg to 2359.jpg (to match the time of day)我所有的照片都存储在一个名为 images 的文件中照片的编号从 0000.jpg 到 2359.jpg（以匹配一天中的时间）

I can not figure out what I am doing wrong.我无法弄清楚我做错了什么。 I tried my best to comment each line of the code so maybe that will help out in any answers.我尽力评论代码的每一行，所以也许这对任何答案都有帮助。

<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

I don't think you can add or change a child object by setting nodeValue.我认为您不能通过设置 nodeValue 添加或更改子 object。 Change the code to this:将代码更改为：

<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

My suggestion我的建议

<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 个解决方案

解决方案1
0 2011-07-07 11:25:35

解决方案2
0 已采纳 2011-07-07 12:00:05

显示带有 javascript 问题的图像

问题描述

2 个解决方案

解决方案1 0 2011-07-07 11:25:35

解决方案2 0 已采纳 2011-07-07 12:00:05

解决方案1
0 2011-07-07 11:25:35

解决方案2
0 已采纳 2011-07-07 12:00:05