javascript - HTML 和 Jquery 中的图像更改

Question

我正在使用 HTML 和 Javascript 开发个人硬币翻转项目。有没有一种方法可以根据“翻转”的结果使图像发生变化。例如，如果它落在正面上，它会在其正面一侧显示一个四分之一的图像，对于反面也是如此？

Javascript代码:

document.getElementById('click').onclick = click;

var heads = 0;
var tails = 0;
function click() {  
    x = (Math.floor(Math.random() * 2) == 0);
    if(x){
        flip("heads");
    }else{
        flip("tails");
    }
};
function flip(coin) {
    document.getElementById("result").innerHTML = coin;
};

HTML 代码:

<button id="click" type="button">CLICK ME</button>
<p>You got: <span id="result"></span></p>

Answer 1

您已经有了工作代码，您只需要这个...

var coins = {
    heads: 'http://lorempixel.com/400/200/sports/heads is sports',
    tails: 'http://lorempixel.com/400/200/animals/tails is animals',
}
document.getElementById("result").setAttribute('src', coins[coin])

    document.getElementById('click').onclick = click;

    var heads = 0;
    var tails = 0;
    var coins = {
        heads: 'http://lorempixel.com/400/200/sports/heads is sports',
        tails: 'http://lorempixel.com/400/200/animals/tails is animals',
    }
    function click() {  
        var result = Math.floor(Math.random() * 2) == 0 ? 'heads' : 'tails';
        flip(result)
    };

    function flip(coin) {
        document.getElementById("result").setAttribute('src', coins[coin])
    };

    <button id="click" type="button">CLICK ME</button>
    <p>You got: <img id="result" /></p>