循环；“下一步”；JavaScript中用于图像的按钮_Javascript_Html

循环；“下一步”；JavaScript中用于图像的按钮

javascript html

循环；“下一步”；JavaScript中用于图像的按钮,javascript,html,Javascript,Html,我试图说明在网页中执行某些数学运算的过程。从非常简单的数学到可能非常高级的数学（例如抽象代数的插图）。我想用一种单一的格式完成所有这些工作，而不考虑复杂性。我认为最合理的解决方案是有一个渲染的图像（手绘），以及一个“下一步”按钮，该按钮渲染下一个图像，直到它到达终点，然后循环回到起点。我对其他可以处理符号、图形、图表和其他表示的策略非常开放如果我确实按顺序使用简单的图像，并按“下一步”按钮循环，那么我发现的最好的方法是保存给定序列的所有图像文件，使用从1到所有图像的索引名“sum1.png”。

我试图说明在网页中执行某些数学运算的过程。从非常简单的数学到可能非常高级的数学（例如抽象代数的插图）。我想用一种单一的格式完成所有这些工作，而不考虑复杂性。我认为最合理的解决方案是有一个渲染的图像（手绘），以及一个“下一步”按钮，该按钮渲染下一个图像，直到它到达终点，然后循环回到起点。我对其他可以处理符号、图形、图表和其他表示的策略非常开放

如果我确实按顺序使用简单的图像，并按“下一步”按钮循环，那么我发现的最好的方法是保存给定序列的所有图像文件，使用从1到所有图像的索引名“sum1.png”。当序列结束时，我生成一个产生错误的图像，我测试错误，然后循环回到1

当我在

标记中编写JavaScript时，这个实现开始工作，但我一直在尝试将它推广到外部.js文件。我遇到的问题是，当创建HTML按钮时，函数似乎不接受参数——或者至少，我不确定如何为它提供参数

这是我写的代码

<html><head><script src="imgLoad.js"></script>
    <body>
    <p><button onclick="nxtBtn()">Next</button></p>
    <div id = "canvas1">
        <canvas id="test"></canvas>
    </div>
    <script style = "text/javascript">
        slideShow("test", "sum");
    </script>
    </body>
</html>

我（认为我）需要能够做的是给按钮功能提供当前图像的索引，以便它可以尝试绘制下一个图像，或者，如果失败，循环回到开始。但是我不知道有什么方法可以给按钮功能提供这些信息

注释中建议，

onclick

函数可以接受参数。我从来没有见过如何实现它，所以我对它的发展做出了最好的猜测。结果如下，它不起作用

<html><head><script src="imgLoad.js"></script>
    <body>
    <p><button onclick="nxtBtn(ctx, name, ind)">Next</button></p>
    <div id = "canvas1">
        <canvas id="test"></canvas>
    </div>
    <script style = "text/javascript">
        slideShow("test", "sum");
    </script>
    </body>
</html>

我并没有考虑让它循环，因为使用这段代码，图像甚至并没有开始渲染。

若你们有一个图像数组，你们可以简单地做一些像

image\u数组[（index+1）%image\u数组.length]

若你们在末尾，它会自动循环回到开头。@A.Lau我还并没有找到一种方法来构建一个可以在服务器端工作的映像数组。你们刚才说你们可以使用数字1-x，那个么为什么不一直按这个数字直到你们找不到一个，然后重新启动呢？@A.Lau对，我不知道为什么我觉得有问题。但似乎我仍然有“下一步”按钮的问题，不知道哪个是当前图像。它如何获得

索引

？使用

索引

。查找如何使用它，它返回一个数字

<html><head><script src="imgLoad.js"></script>
    <body>
    <p><button onclick="nxtBtn(ctx, name, ind)">Next</button></p>
    <div id = "canvas1">
        <canvas id="test"></canvas>
    </div>
    <script style = "text/javascript">
        slideShow("test", "sum");
    </script>
    </body>
</html>

// Produce an Image() object with filename name+ind+".jpg".
function initImg(name, ind) {
    var img = new Image();
    img.src = name + ind + ".jpg";
    return img;
}

// Draw image img to context ctx.
function draw(ctx, img) {
    if (!img.complete) {
        setTimeout( function() {
            draw(can, img);
        }, 50);
    }

    ctx.clearRect(0,0, 200,200);
    ctx.drawImage(img, 0,0, 200,200);
}

// Button function
function nxtBtn(ctx, name, ind) {
    ind++;
    draw(ctx, initImg(name, ind));
}

// Set up the "slideshow", i.e. draw the first image called name 
// to the canvas canID.
function slideShow(canId, name) {
    var can = document.getElementById(canId);
    can.width = 300;
    can.height = 300;
    var ind = 1;
    var ctx = can.getContext('2d');
    var img = initImg(name, 1);
    draw(ctx, img);
}