Fatal编程技术网
  • javascript/
  • 显示带有javascript问题的图像

显示带有javascript问题的图像

javascript image

显示带有javascript问题的图像,javascript,image,clock,Javascript,Image,Clock,当我尝试运行下面的代码时，浏览器不会显示图像，而是显示：[object HTMLImageElement] 我想创建一个时钟，每分钟显示不同的图片（为妻子准备的东西）。我首先制作了一个函数，从浏览器的时钟中查找日期，将其转换为字符串值，该值将作为文件名。该函数在网页加载时调用，并且该函数每秒更新一次。有一个带有标记id调用的标记，应该在其中显示最终结果 我所有的照片都存储在一个名为images的文件中 照片编号从0000.jpg到2359.jpg（以匹配一天中的时间） 我不知道我做错了什么。我尽

当我尝试运行下面的代码时，浏览器不会显示图像，而是显示：[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>


//函数根据用户的时钟获取和更新图片文件
函数updateEpicture（）
{
//用于获取用户时钟上的日期的变量
var clockTime=新日期（）；
//仅显示小时和分钟的变量
var hours=clockTime.getHours（）；
var minutes=clockTime.getMinutes（）；
//将前导零添加到10下的小时和分钟
小时=（小时<10？：“）+小时；
分钟=（分钟<10？：“）+分钟；
//将小时和分钟转换为字符串值
var hourString=hours.toString（）；
var minuteString=minutes.toString（）；
//变量将小时和分钟字符串放在一起，形成一个图片文件名
var timeToPictureFile=hourstring+minutestring；
//变量来创建新的图像对象
var pictureFile=新图像；
//加上“；
//更新时间显示
document.getElementById（'picture'）.firstChild.nodeValue=pictureFile；
}
我认为您不能通过设置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>


//函数根据用户的时钟获取和更新图片文件
函数updateEpicture（）
{
//用于获取用户时钟上的日期的变量
var clockTime=新日期（）；
//仅显示小时和分钟的变量
var hours=clockTime.getHours（）；
var minutes=clockTime.getMinutes（）；
//将前导零添加到10下的小时和分钟
小时=（小时<10？：“）+小时；
分钟=（分钟<10？：“）+分钟；
//将小时和分钟转换为字符串值
var hourString=hours.toString（）；
var minuteString=minutes.toString（）；
//变量将小时和分钟字符串放在一起，形成一个图片文件名
var timeToPictureFile=hourstring+minutestring；
var pictureFileSrc='images/'+timeToPictureFile+'.jpg'；
//如果pictureFile已经存在，那么只需在图像上设置src
var pictureFileObj=document.getElementById（“pictureFile”）；
if（pictureFileObj）{
pictureFileObj.src=pictureFileSrc；
}否则{
//变量来创建新的图像对象
var pictureFile=新图像；
pictureFile.id=“pictureFile”；
//添加
我的建议

<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>


//函数根据用户的时钟获取和更新图片文件
var oldImage=“”；
函数updateEpicture（）{
//用于获取用户时钟上的日期的变量
var clockTime=新日期（）；
//仅显示小时和分钟的变量
var hours=clockTime.getHours（）；
var minutes=clockTime.getMinutes（）；
//将前导零添加到10下的小时和分钟
小时=（小时<10？：“）+小时；
分钟=（分钟<10？：“）+分钟；
//变量将小时和分钟字符串放在一起，形成一个图片文件名
var timeToPictureFile=”“+小时+分钟+'.jpg'；
if（oldImage==timeToPictureFile）return；//还不需要这样做
oldImage=timeToPictureFile；//保存
//变量来创建新的图像对象
var pictureFile=新图像（）；
pictureFile.src=timeToPictureFile；//预加载图像；
//更新时间显示-
//这也可以通过更改现有图像的src属性来完成
document.getElementById（'picture'）。innerHTML=''；
}
window.onload=function（）{
updatePicture（）；
setInterval（updatePicture，1000）；//每秒检查一次
}
或


//函数根据用户的时钟获取和更新图片文件
函数updateEpicture（）{
//用于获取用户时钟上的日期的变量
var clockTime=新日期（）；
//仅显示小时和分钟的变量
var hours=clockTime.getHours（）；
var minutes=clockTime.getMinutes（）；
//将前导零添加到10下的小时和分钟
小时=（小时<10？：“）+小时；
分钟=（分钟<10？：“）+分钟；
//变量将小时和分钟字符串放在一起，形成一个图片文件名
var timeToPictureFile=”“+小时+分钟+'.jpg'；
//更新时间显示
document.getElementById（'picture'）。innerHTML=''；
}
window.onload=function（）{
updatePicture（）；
setInterval（updatePicture，60000）；//每分钟检查一次
}
这将添加图像而不是替换图像。并且您仍然尝试将.src更改为htmltag@mplungjan-我的错。纠正了那个问题。 
<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>