停止 3 个图像旋转只需单击一个按钮

Stopping 3 Images spinning on 1 button click

本文关键字：一个 按钮 单击 图像 旋转 停止      更新时间：2023-09-26

我一直在尝试弄清楚如何在按下水果机手柄的同时在不同时间停止 3 张图像，我可以使用 JavaScript 做到这一点。

const images = ["plum.jpg", "cherries.jpg", "pineapple.jpg", "lemon.jpg", "apple.jpg", "bananas.jpg"];
var count;
const speed = 100;
function beginShow(){
    count = 20;
   nextImage();}
function nextImage(){
changeImage("pic1");
count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero
setTimeout(function(){alert("Try Again") }, 1000); // pop up after 1 second saying try again 
changeImage("pic2");
count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero
{
    tim = setTimeout("nextImage();", 200);
}
changeImage("pic3");
count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero
{
    tim = setTimeout("nextImage();", 300);
}}
function changeImage(imageId){
var rand = Math.floor(Math.random() * images.length);
document.getElementById(imageId).src =images[rand];
// changes handle from not pulled to pulled
var image = document.getElementById('Lever');
if (image.src.match("Lever2")) {
    image.src = "lever1.jpg";
} else {
    image.src = "lever2.jpg"; }}

由于这似乎是学校练习，因此我不会发布代码。

但是，请注意：count要么是全局变量，要么是从封闭范围（函数）内访问的。或者计数是在运行时创建的，并被设置为默认值（0）...

此外，您的设置超时似乎错误...

如果您打算x一次执行操作，则x+1，然后x+2，然后只需连接超时（请阅读MDN站点上的一些文档）

编辑：

一个可以提供帮助的示例如下：

function roll(){
   var timer1 = window.setTimeout(function(){document.getElementById("pic1").src=images[Math.floor(Math.random() * images.length)];}, 1000);
   var timer2 = window.setTimeout(function(){document.getElementById("pic2").src=images[Math.floor(Math.random() * images.length)];}, 2000);
   var timer3 = window.setTimeout(function(){document.getElementById("pic3").src=images[Math.floor(Math.random() * images.length)];}, 3000);
}
相关文章：