点击图片时获取随机图片的javascript代码

Question

点击图片时获取随机图片的javascript代码

3

我正在学习Javascript，我已经能够创建一个简单的游戏，其中形状和颜色会改变并且移动。但是我不知道如何输入图片……请帮帮我！=( 谢谢！=)

这是我创建的游戏网站 http://sites.codeschool.org.uk/?site=imat3ap0t 我想把形状替换成我有的三个jpg图片，然后让它做同样的事情。但是我卡住了！

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split(''); //the numbers&letters are for color codes. split is the string (set of numbers and letters into an array)
    var color = '#'; //color codes start with #
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 16)];
    }
    return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {
    var time = Math.random();
    time = time * 5000;

    setTimeout(function () {
        if (Math.random() > 0.5) {
            document.getElementById("box").style.borderRadius = "100px";
        } else {
            document.getElementById("box").style.borderRadius = "0";
        }

        var top = Math.random();
        top = top * 300;
        var left = Math.random();
        left = left * 500;
        document.getElementById("box").style.top = top + "px";
        document.getElementById("box").style.left = left + "px";
        document.getElementById("box").style.backgroundColor = getRandomColor();
        document.getElementById("box").style.display = "block";
        createdTime = Date.now();
    }, time);
}

document.getElementById("box").onclick = function () {
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    document.getElementById("time").innerHTML = reactionTime;
    document.getElementById("box").style.display = "none";
    makeBox();
}

makeBox();

谢谢大家的回复！

- Crystal Kim

创建一个包含图片名称的数组，并使用 Math.randoom() 来选择一个“随机”的图片（从计算机的角度来说，实际上并没有真正的随机）。然后，您需要设置图片的 src 属性。 - GuyT

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler · Answer 1

好的，您需要将您的函数修改为以下内容：

function getRandomImage() {
    // All of the image options
    // This is very similar to string of characters you have now
    var images = ['path/to/image/1', 'path/to/image/2', 'path/to/image/3']

    // Randomly select one image path
    // By using images.length we don't have to hardcode the length like the "16" you're using, which is good incase the list changes
    var imagePath =  images[Math.floor(Math.random() * images.length)];

    // Return random image path
    return imagePath;
}

那么您可能希望在文档中的某个位置使用 img 标签，而不是现在使用的 div：

<img id="changing-image"></img>

然后你可以使用更多的JavaScript来查找图片并更改其src属性：

var image = document.getElementById("changing-image");
image.src = getRandomImage();