Question

我对javascript不太满意。我可以在网上查看一些内容，然后将其放入文档中，但我非常喜欢这样做，所以请耐心等待。

我有以下内容;

<iframe src="" name="frame" id="frame" width="400px" height="400px"></iframe>
<script type="text/javascript">
var frames = Array('http://www.google.com/', 3,
'http://www.yahoo.com/', 3,
'http://www.ask.com/', 3,
'http://www.dogpile.com/', 3);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>

这就是我想要的，它正在重新加载循环中iframe的内容。现在，我将如何实现“开始”按钮和“停止”按钮。我理解我的代码将在页面加载时开始重新加载循环...所以我想要做的是打开iframe的页面，脚本不会启动，直到＆＃39; START＆＃39;单击按钮，然后在“停止”按钮时停止。按下按钮。

就像我说的那样，我在使用javascript方面表现不佳，我在学习的过程中一直在学习，所以如果有人可以接受我的代码，插入按钮代码并重新发布，那么我将永远感激不尽

由于

Answer 1

创建一个变量，用于存储您是否正在重新启动：

var loop = false;

现在，插入一个按钮：

<input type="button" name="loop" id="loop" value="START LOOP" onclick="startStop();" />

另外，我们需要创建一个名为startStop（）;

的函数

function startStop(){
    // Below is shorthand to invert the value of the loop variable from true to false.
    loop = !loop;
    // I guess we're also like to change the text on the loop button to say start or stop
    // below we are using shorthand for if(loop === true) print "STOP" else print "START"
    document.getElementById("loop").value = loop ? "STOP LOOP" : "START LOOP";
    // then we need to call your function, because we want to restart the loop or stop it after clicking
    ChangeSrc();
}

然后我们需要在递归函数中添加一个检查器，如果没有设置循环，则取消循环。

function ChangeSrc(){
    // if loop is NOT true (aka false), return and don't continue the function
    if(!loop) return;
    if (i >= len) { i = 0; } // start over
    document.getElementById('frame').src = frames[i++];
    setTimeout('ChangeSrc()', (frames[i++]*1000));
}

如果你的超时：你实际上可以通过传递没有字符串而没有括号的ChangeSrc来调用你的函数，这会传递将在超时中调用的函数的名称：setTimeout(ChangeSrc, (frames[i++] * 1000));。它看起来更清洁。

更新

所以总代码看起来像这样：

<iframe src="" name="frame" id="frame" width="400px" height="400px"></iframe>
<input type="button" name="loop" id="loop" value="START LOOP" onclick="startStop();" />
<script type="text/javascript">
// I added the new keyword here, it works without but its better with! You could also just wrap it in []
var frames = new Array(
    'http://www.google.com/', 3,
    'http://www.yahoo.com/', 3,
    'http://www.ask.com/', 3,
    'http://www.dogpile.com/', 3
);
var i = 0, 
    len = frames.length, 
    loop = false;
function ChangeSrc(){
    if(!loop) return;
    if (i >= len) { i = 0; } // start over
    document.getElementById('frame').src = frames[i++];
    setTimeout(ChangeSrc, (frames[i++]*1000));
}
function startStop(){
    loop = !loop;
    document.getElementById("loop").value = loop ? "STOP LOOP" : "START LOOP";
    ChangeSrc();
}
// I've removed your window.onload because the button will allow you to start the loop
</script>

Answer 2

以下是一个快速解决方法：

<强> HTML

<iframe src="" name="frame" id="frame" width="400px" height="400px"></iframe>
<button id="start">START</button>
<button id="stop">STOP</button>

<强>脚本

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

    var needToRun = false
    var frames = Array('http://www.google.com/', 3,
            'http://www.yahoo.com/', 3,
            'http://www.ask.com/', 3,
            'http://www.dogpile.com/', 3);
    var i = 0, len = frames.length;
    function ChangeSrc() {
        if (needToRun) {
            if (i >= len) {
                i = 0;
            } // start over
            document.getElementById('frame').src = frames[i++];
            setTimeout('ChangeSrc()', (frames[i++] * 1000));
        }
    }

    $('#start').click(function() {
        needToRun = true;
        ChangeSrc();
    });

    $('#stop').click(function() {
        needToRun = false;
    });

</script>

启动/停止javascript所需的按钮

2 个答案:

更新