这是我的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多个结果,我希望每个结果都有不同的图像)
答案 0 :(得分: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>
来显示图片。
答案 1 :(得分:1)
没有图像标记和网址,如何显示不同的图像,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;
}
}