Question

我正在制作一个游戏，该游戏会随机选择一张照片，然后用该照片替换上一张照片，但是我不知道如何用javascript编写代码。

这是我尝试过的方法，但是没有用。

这是JavaScript。

if(Build.VERSION.SDK_INT >= 27) {
    decorView.setSystemUiVisibility(FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS | 
             View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR |
             View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}

这是html。

var trash = [["recycle1.png", "recycle2.png","recycle3.png"],["bio1.png","bio2.png","bio3.png"],["nonbio1.png", "nonbio2.png", "nonbio3.png"]];

function game ()
    {var trashKind = trash[Math.floor(Math.random()*trash.length)][Math.floor(Math.random()*trash.length)];
    document.getElementById("trash").src = "../images/" + trashKind;};

game ();

Answer 1

如果html是：

<img src="random-picture.jpg" alt="random-picture" id="theImage">

因此，您需要执行以下操作：

const arr = ["picture.jpg" , "picture2.jpg" , "picture3.jpg"];
const arrLength = arr.length;
const num = Math.floor( (Math.random())*arrLength );
document.getElementById("theImg").src = `/images/lol/${arr[num]}`;

注意`` 您可以轻松地从这里继续

Answer 2

您可以像创建1D数组那样创建2D数组，因为它会影响索引。

var trash = ["recycle1.png", "recycle2.png","recycle3.png","bio1.png","bio2.png","bio3.png","nonbio1.png", "nonbio2.png", "nonbio3.png"];

Answer 3

如果您仅同时显示一个图像，并且图像HTML标签已经在DOM中，那么您只需要编写一些JavaScript即可处理该图像标签的源代码更改。

使用间隔每隔一定时间更改图像

如果您的图片HTML标记具有id属性，则可以在JavaScript中引用该图片：

<div>
  <img id="image" src="noimageyet" alt="noimageyet">
</div>

然后在JavaScript中，定义要使用的图片的数组，代码将调整为数组的大小，因此，无论您向数组中添加多少张图片，代码都会始终从数组。

JavaScript：

var gameImage = document.querySelector("#image"),
    images = ["recycle1.png", "recycle2.png","recycle3.png","bio1.png","bio2.png","bio3.png","nonbio1.png", "nonbio2.png", "nonbio3.png"];
function grn(min, max) {
    return parseInt(Math.random() * (max - min) + min);
}
function game(){
  let newImage = images[grn(0,images.length)];
  gameImage.src = newImage;
  gameImage.alt = newImage;
}
setInterval(game,1000);

这应该可以帮到您。您可以在here上查看它。

您如何使用javascript放置图片？

3 个答案:

使用间隔每隔一定时间更改图像

JavaScript：