gpt4 book ai didi

javascript - 如何在预定义的 html 表中显示来自 javascript 数组的图像

转载 作者:行者123 更新时间:2023-11-28 03:14:17 26 4
gpt4 key购买 nike

大家好,我是一名学生,目前正在做一个 html 和 javascript 项目。我最初来到这个网站是为了寻找一种方法来从另一个数组中引用的 javascript 数组中获取图像并将其显示在预定义的 html 表中。

正如预期的那样,我从未找到问题的确切答案,但设法使用我自己的方式使用代码片段和从各种帖子和回答所述帖子的用户提供的知识来找到解决方案。

现在它可以工作了,我想问问大家是否可以帮助我简化代码,或者您是否可以建议将来使用更简单的替代方法。

我是 javascript 和 html 的新手。我正在使用 Firefox,但我还没有使用 jquery。

这是来自相关 html 页面的代码。

  <body>
<table border="4px">
<caption>
Pet Table
</caption>
<tr>
<!-- Images-->
<td>
<script>
display(bat)
</script>;
</td>
<td>
<script>
display(goat)
</script>
</td>
<td>
<script>
display(butterfly)
</script>
</td>
</tr>
</table>
</body>

这是包含三个示例的 javascript。

        function pet(species, name, colour, size, food, limb, img) {
this.species = species; //property of a pet
this.name = name; //property of a pet
this.colour = colour; //property of a pet
this.size = size; //property of a pet
this.food = food; //property of a pet
this.limb = limb; //property of a pet
this.img = img; //property of a pet
this.move = move; //a function of a pet defined to the pet

}
//array for images used in the pet array

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = "resources/bat.gif";
imgArray[0].height = "200";
imgArray[0].width = "200";

imgArray[1] = new Image();
imgArray[1].src = "resources/goatVec01.png";
imgArray[1].height = "200";
imgArray[1].width = "200";

imgArray[2] = new Image();
imgArray[2].src = "resources/butterfly.gif";
imgArray[2].height = "200";
imgArray[2].width = "200";

<!-- more images -->


//adding variables to the pet array
var bat = new pet("fruit bat", "bats", "grey", "small", "apples", "wings", "0", move);

var goat = new pet("goat", "bastard", "off white", "goat-sized", "clothing", "hooves", "1", move);

var butterfly = new pet("butterfly", "flutterby", "rainbow", "petite", "nectar", "wings", "2", move);

<!-- more variables -->


//function used to call and display the images
function display(pet) {
var i = document.write(imgArray[pet.img].outerHTML);
}

如果我问第二个问题。自从我开始使用 Firefox 以来,我不得不使用这段代码来让 html 正常工作,但我想知道除了将这些代码添加到每个页面之外是否还有其他方法可以做到这一点。

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

帮助很大的帖子列表

Image from an array HTML Javascript

How to display an image thats in an array? JavaScript

How to display image with javascript?

The character encoding of the HTML document was not declared

最佳答案

第一个问题,您想要为所有元素提供 ID。这样您就可以使用 javascript 引用它们。

第二个问题,在现实世界的应用程序编程中,您将为所有网站创建 ssi 文件。 SSI 代表服务端包含。然后,您只需在 ssi 文件中输入 1 次信息,该文件就会自动将这些元标记放置在您正在加载的每个网页中。如果您是编程专业的学生,​​我猜您的类(class)中会在某个时间点讲到这一点。

关于javascript - 如何在预定义的 html 表中显示来自 javascript 数组的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29006411/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com