Question

这是我的Js代码：

function openCase() {
var Gun = Math.floor((Math.random() * 110) + 1);
console.log(Gun)
Weapon = "Opening..."
document.getElementById("Weapon").innerHTML=Weapon;
 setTimeout(function(){
if (Gun < 3) {
     Weapon = "Butterfly Knife | Fade"
    document.getElementById("Weapon").innerHTML=Weapon;
} else if (Gun > 2 && Gun < 5) {
    Weapon = "Butterfly Knife"
    document.getElementById("Weapon").innerHTML=Weapon;
}

这是我的Html代码

<button onclick="openCase()">Open Case</button>
<br>
You Unboxed: <span id="Weapon">Nothing</span> <br>

我想知道是否有可能我可以为if else语句的每个结果显示不同的图像。所以，如果你得到蝴蝶刀，它会在我的HTML中显示一张图片？

（我的if else语句有100多个结果，我希望每个结果都有不同的图像）

Answer 1

您只需要创建一个包含图像路径的数组，例如

var images = ["image1.png", "image2.png"]

然后获取对图像元素的引用，然后相应地将其源设置为数组中的图像

例如

myImage.src = images[0]

编辑：

所以你说你有一系列这样的图像

var images = ["stub.png", "Other.png"];

我发现您使用<span>来显示图片。因此，您需要获得对该<span>元素的引用。

var myImage = document.getElementById("weapon");

由于您使用<span>元素来显示图片而不是<img>，因此要显示图片，请执行此操作

myImage.style.backroundImage = url(images[n]);，其中n是与if / else对应的图像索引。您应该使用<img>来显示图片。

Answer 2

没有图像标记和网址，如何显示不同的图像，setTimeout函数中没有第二个参数。在这里，我可以帮助你

<br/>
You Unboxed: <img id="Weapon" src=''/> 

function openCase() {
    var Gun = Math.floor((Math.random() * 110) + 1);
    console.log(Gun);
    var weaponarray = [] // create your image array here
    Weapon = //some initial image
    document.getElementById("Weapon").src=Weapon;
    setInterval(callback,500) // every 500 mili sec call function
}

   function callback(){
    var Gun = Math.floor((Math.random() * 110) + 1);
    if (Gun < 3) {
             Weapon = weaponarray[Gun];
             document.getElementById("Weapon").src=Weapon;
       } 
       else if (Gun > 2 && Gun < 5) {
        Weapon = weaponarray[Gun];
        document.getElementById("Weapon").src=Weapon;
       }    
    }

Js在函数中显示图像

2 个答案: