需要帮助在 html/js 中创建一个 coinflip，它将为每次翻转返回一个图像

Question

基本上我希望能够在我的网页上按下一个按钮来模拟 50/50 抛硬币。 我需要根据结果返回正面和反面图像。

我从这个开始：

<script> function coinFlip() { return Math.floor(Math.random() * 2); } </script>

Answer 1

您可以生成一个随机数，它有 50/50 的概率是奇数或偶数，因此您可以同样显示正面或反面。 先写image标签，

<img src="emptyImg.jpg" id="tossImg">
<button onclick="tossCoin()">Toss</button>

现在你可以把你的 toss() 函数写成，

function tossCoin(){
//This will generate a number between 1 to 10 randomly
    var r = Math.floor((Math.random() * 10) + 1);
    var myImg = document.getElementById("tossImg");
    if(r%2==0){
        myImg.src = "heads.jpg";
    }else{
        myImg.src = "tails.jpg";
    }
}

Answer 2

操纵旋转度数以将结果设置为头部或尾部。

 /* flip cards */ .card__flip { position: relative; width : 100px; height: 100px; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; text-align: center; } .card__front, .card__back { background-color: green; backface-visibility: hidden; transition: transform 1s ease-in; } .card__back { background-color: red; transform: rotateX(-540deg); } .card__flip.effect__hover:hover .card__front { transform: rotateX(-1800deg); } .card__flip.effect__hover:hover .card__back { transform: rotateX(0); }

 <div class="card__flip effect__hover"> <div class="card__front"> Head </div> <div class="card__back"> Tail </div> </div>