我正在使用 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>
最佳答案
您已经有了工作代码,您只需要这个...
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>
关于javascript - HTML 和 Jquery 中的图像更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41406622/