J'essaye de créer un site de flip. Comment puis-je faire tourner les têtes et les queues à l'image avec javascript ou html?

   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;
};
0
tyhphone 30 août 2020 à 01:21

4 réponses

Meilleure réponse

Créez un élément html <img>:

<img id="coin" alt="coin"></img>

Puis définissez son src comme ceci:

function flip(coin) {
    if(coin === "heads") {
        document.getElementById("coin").src = "path/to/coin-heads.jpg";
    } else if(coin === "tails") {
        document.getElementById("coin").src = "path/to/coin-tails.jpg";
    }
}
0
Khashayar Aryanmehr 29 août 2020 à 22:38
let img = document.createElement('image');
addEventListener('click', () => {
    const randomNum = Math.random();
    if (randomNum > 0.5) img.src = 'path/to/heads/image';
    if (randomNum < 0.5) img.src = 'path/to/tails/image';
);

Utilisez '.src' pour changer l'image

0
Yang Bai 30 août 2020 à 01:07

Utilisez l'image src et modifiez-la en utilisant javascript. Vous pouvez ensuite incorporer une fonction qui vérifie un conditionnel pour voir quel src est actuellement défini, puis les basculer à l'aide d'un tableau. J'ai utilisé un écouteur d'événement de clic sur l'image elle-même, bien que cela puisse être défini à l'aide d'une pièce de monnaie sur laquelle cliquer également.

let imgsrc = ['https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', 'https://static.toiimg.com/thumb/72975551.cms?width=680&height=512&imgsize=881753'];

let image = document.querySelector('.image');
image.addEventListener('click', function() {
  if (image.src === imgsrc[0]) {
    this.src = imgsrc[1];
  } else if (image.src === imgsrc[1]) {
    this.src = imgsrc[0];
  }
})
<img id="img" alt="" class="image" valign="center" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" align="middle" border="0">
0
dale landry 29 août 2020 à 23:11
// Define heads and tails variables
var heads = '<headsPath>';
var tails = '<tailsPath>';

// Get the img element from the HTML file by its tag
var coin = document.getElementById('coin');

// Set the default displayed image to heads
coin.setAttribute('src', heads);

// When you click on the coin, run the function below
coin.addEventListener('click', function() {
  // Get a random number
  var randomNumber = Math.floor(Math.random() * 2);
  
  // Log into the console the number given
  console.log('The random number is: ' + randomNumber);
  
  // If the number is 0, display heads, else display tails
  if(randomNumber === 0) {
    coin.setAttribute('src', heads);
  } else {
    coin.setAttribute('src', tails);
  };
});
<img id="coin">
0
smunteanu 29 août 2020 à 22:38