J'essaie de faire tourner une roue de roulette en cliquant sur un bouton, mais je n'arrive pas à transmettre le nombre aléatoire généré à partir de mon fichier js à css
JS
<body>
<div class="roulette_wheel" style="z-index: 0;">
<img src="ayy.jpg" width="500px" height="500px" />
<button value="spin" onclick="roulette_spin(this)">SPIN</button>
</div>
3 Réponses :
Voici un exemple fonctionnel avec quelques mises à jour de votre code.
Comme le suggère @ H.Figueiredo, j'ai changé le sélecteur de rotation en img pour éviter la rotation du bouton.
HTML
function roulette_spin(btn){
var rand = Math.floor(Math.random() * 720) + 540;
$('.roulette_wheel img').css('transform','rotate('+rand+'deg)');
}
$('.spin').click(function(){
roulette_spin($(this).siblings('img'));
});
<div class="roulette_wheel" style="z-index: 0;">
<img src="https://picsum.photos/200/300" width="500px" height="500px" />
<button class="spin" value="spin">SPIN</button>
</div>
stackoverflow.com/questions/45867078/… < / a>
Honnêtement, je pense que c'est la bonne réponse, mais je changerais la rotation en img au lieu de div, puisque vous ferez également tourner le bouton à l'intérieur du div. Et vous envoyez même l'objet img à la fonction, il m'a donc semblé que c'était ce que vous vouliez. Juste une petite suggestion.
Essayez ceci:
<html>
<body>
<div class="roulette_wheel" style="z-index: 0;">
<img src="ayy.jpg" width="500px" height="500px" />
<button value="spin" onclick="roulette_spin()">SPIN</button>
</div>
<script>
function roulette_spin(){
var rand = Math.floor(Math.random() * 720) + 540;
document.querySelector('.roulette_wheel').style.transform = 'rotate('+rand+'deg)';
}
</script>
</body>
</html>
Je dirais que la classe roulette_wheel n'est pas assignée à l'élément approprié, l'image. En plus de définir la transformation de rotation, la roue ne tournera pas, mais changera simplement son angle de rotation une fois (et ici sans aucune transition).
Vous trouverez ci-dessous un exemple de travail d'attribution d'un style de transformation dans un processus d'animation. / p>
Les appels JQuery ont été remplacés par des sélecteurs vanille ( getElementsByClassName , getElementById ) et manipulation d'objets de style au lieu de la méthode css de JQuery.
Consultez également la documentation de requestAnimationFrame a >
(OK, je m'ennuyais un peu ici :))
<body>
<div style="z-index: 0; position: relative">
<img class="roulette_wheel" src="http://pngimg.com/uploads/roulette/roulette_PNG14.png" width="300px" height="300px" />
<div style="position: absolute; top: 0px; left: 150px; background-color: red; width: 1px; height: 40px;"></div>
<button value="spin" onclick="roulette_spin(this)">SPIN</button>
<span id="score"></span>
</div>
var force = 0;
var angle = 0;
var inertia = 0.985;
var minForce = 15;
var randForce = 15;
var rouletteElem = document.getElementsByClassName('roulette_wheel')[0];
var scoreElem = document.getElementById('score');
var values = [
0,27,10,25,29,12,8,19,31,18,6,21,33,16,4,
23,35,14,2,0,28,9,26,30,11,7,20,32,17,5,
22,34,15,3,24,36,16,1
].reverse();
function roulette_spin(btn){
// set initial force randomly
force = Math.floor(Math.random() * randForce) + minForce;
requestAnimationFrame(doAnimation);
}
function doAnimation() {
// new angle is previous angle + force modulo 360 (so that it stays between 0 and 360)
angle = (angle + force) % 360;
// decay force according to inertia parameter
force *= inertia;
rouletteElem.style.transform = 'rotate('+angle+'deg)';
// stop animation if force is too low
if (force < 0.05) {
// score roughly estimated
scoreElem.innerHTML = values[Math.floor(((angle / 360) * values.length) - 0.5)];
return;
}
requestAnimationFrame(doAnimation);
}
Je ne comprends pas pourquoi cela ne fonctionne pas lorsque j'essaie de l'exécuter sur mon site, cela fonctionne ici mais sur ma page Web, cela donne un style d'erreur non défini
Le seul accès à une propriété nommée style dans ce code se fait depuis rouletteElem.style.transform ... . Cela signifie que rouletteElem n'est pas défini. Il peut être indéfini s'il n'a pas été déclaré, s'il n'est pas visible dans la portée actuelle, ou si le sélecteur que vous avez utilisé n'a rien retourné. Essayez de faire un violon de votre implémentation et je vais jeter un œil.
J'ai tout essayé mais cela ne fonctionne pas, Uncaught TypeError: Impossible de lire la propriété 'style' de undefined à doAnimation
veuillez utiliser jsfiddle.net ou codepen.io pour créer un exemple exécutable de votre code afin que quelqu'un puisse vous aider;)
vous devez changer le type de chargement en "no wrap - bottom of
" dans jsfiddle, sinon le onclick ne fonctionnera pas: jsfiddle.net/utxvqh1m/1Ouais ça marche maintenant ... mais pourquoi ça ne marche pas quand je l'utilise dans mon propre fichier html ...
veuillez nous montrer votre fichier html complet et nous le découvrirons
vous aviez un point de trop dans votre sélecteur de nom de classe, voyez-le ici: jsfiddle.net/aj86vu21/1
@ remix23: J'aime vraiment la façon dont cela fonctionne. La roue tourne et les valeurs correctes sont représentées. J'ai un besoin différent que je me demandais si vous pouviez m'aider. J'ai une roue en sept parties et j'aimerais que la rotation s'arrête de manière aléatoire au centre de l'une des 7 parties, chaque fois que je clique sur le bouton de rotation. Comment réaliserais-je cette fonctionnalité? En ce moment, il s'arrête au hasard sur les bords ou sur une partie de mes sections de la roue qui n'ont aucun contenu. S'il s'arrête au centre des calculs mathématiques, tels que ((360/7) / 2), ce qui donne le centre du premier bloc.
@Johnny Pour cela, vous devrez définir des attracteurs. Ci-dessus, la mise à jour de la vitesse de rotation est newSpeed = speed- (speed * (1 - inertia)) . Pour chaque mise à jour, vous pouvez calculer la distance angulaire orientée (+/-) de disons les trois tranches les plus proches, puis calculer la force résultante moyenne attraction = factor * (1 / angDist1 + 1 / angDist2 + 1 / angDist3) / 3 puis changez le calcul en newSpeed = speed - (speed * (1 - inertia)) - attraction , arrêtez l'animation lorsque la vitesse est faible ET positionnez très près d'une cible. vous devrez affiner un petit facteur ET limiter 1 / angDist pour éviter une force infinie.
@Johnny. Le commentaire ci-dessus n'est pas testé et probablement inexact. Je pourrais donner une réponse appropriée à une nouvelle question sur votre roue en sept parties. Vive Newton et les simples moteurs physiques ad hoc ;-)
@ remix23 J'ai créé mon projet ici pour que vous puissiez apporter vos conseils d'amélioration: stackoverflow.com/questions/65959865/...
@Johnny, j'ai ajouté ma réponse là-bas
Faire pivoter une image en continu
Lorsque je clique sur le bouton, l'image est tournée. violon
ce code fonctionne correctement dans ma machine ... alors, où vous obtenez l'erreur..s'il vous plaît pouvez-vous le dire ...?