gpt4 book ai didi

javascript - 如何在每个动态创建的图像下方显示一个数字?

转载 作者:行者123 更新时间:2023-11-30 16:57:21 26 4
gpt4 key购买 nike

我想显示特定图像的次数与用户给定的次数一样多。这部分已完成。但我想在每张图片下方显示一个数字。例如,如果用户输入为 4,则应该有 4 张图像,第一张图像下方为“1”,第二张图像下方为“2”。图片也必须是可点击的。

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>


<div id="demo">

<script>
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";

var arr = [];
for (var i = 0; i < x; i++) {
arr.push(c);

document.getElementById("demo").innerHTML = arr.join("&nbsp&nbsp");

}
}


</script>

</body>
</html>

最佳答案

var imageSrc = "http://fc08.deviantart.net/fs71/f/2010/148/1/9/20x20_PNG_Icons_DOMO_by_JMcIvor.png";

function imag(c,x) {
var x = document.getElementById("myNumber").value;
var demo = document.getElementById("demo");

var container = document.createElement("div");
container.setAttribute("class", "container");

for(var i=0; i<x; i++) {
var image = document.createElement("img");
image.setAttribute("class", "image");
image.setAttribute("src", imageSrc);
container.appendChild(image);
var text = document.createElement("div");
text.innerHTML = i+1;
container.appendChild(text);
demo.appendChild(container);
}
}
#demo {
}

.container {
}

.image {
}

.text {
}
<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>

<div id="demo"></div>

</body>
</html>

我只是用另一个图片 url 来测试代码,用你的替换它。我希望这会有所帮助。

关于javascript - 如何在每个动态创建的图像下方显示一个数字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29457637/

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