如何通过点击按钮暂停和恢复html页面的执行

Question

我正在尝试制作类似于视频的网页。所以我需要暂停网页，当用户按下按钮并从该点继续。

Answer 1

你不能“暂停”HTML的执行。您可以通过用户或使用计时器通过操作（按钮点击前的按钮）显示项目（最初使用css隐藏）来控制何时以及如何使用JavaScript的不同部分，以及使用javascript gets revealed。请参见暂停和播放的setTimeout和setInterval

function removeClass(el, className) { 
 
    if (el.classList) 
 
    el.classList.remove(className); 
 
    else { 
 
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); 
 
    el.className = el.className.replace(reg, ' '); 
 
    } 
 
} 
 

 
function revealDivInTime(id, time) { 
 
    var div = document.getElementById(id); 
 
    if (div) { 
 
    setTimeout(function() { 
 
     removeClass(div, "hidden"); 
 
    }, time); 
 
    } 
 
} 
 

 
window.onload = function() { 
 
    document.getElementById("start").onclick = function() { 
 
    revealDivInTime("one", 1000); 
 
    revealDivInTime("two", 5000); 
 
    revealDivInTime("three", 10000); 
 
    } 
 
    document.getElementById("end").onclick = function() { 
 
    revealDivInTime("four", 0); 
 
    revealDivInTime("five", 3000); 
 
    revealDivInTime("three", 10000); 
 
    } 
 
}

.hidden { 
 
    display: none; 
 
}

<div> 
 
    Click to start story: <button id="start">click me</button> 
 
</div> 
 
<div id="one" class="hidden"> 
 
    <p>First Part of story revealed after 1 second</p> 
 
</div> 
 
<div id="two" class="hidden"> 
 
    <p>Second Part of story revealed after 5 seconds</p> 
 
</div> 
 
<div id="three" class="hidden"> 
 
    <p>Third Part of story revealed after 10 seconds</p> 
 
    <p> Click this button to finish Story: <button id="end">Finish</button> 
 
</div> 
 
<div id="four" class="hidden"> 
 
    <p>This get's revealed only after user clicks on button in story part 3. Story will end in 3 seconds</p> 
 
</div> 
 
<div id="five" class="hidden"> 
 
    <p>Story finished</p> 
 
</div>

实例表明：

var currentScene = 0, 
 
    looper, sceneCount = 10, 
 
    isPlaying = false; 
 

 
function removeClass(el, className) { 
 
    if (el.classList) 
 
    el.classList.remove(className); 
 
    else { 
 
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); 
 
    el.className = el.className.replace(reg, ' '); 
 
    } 
 
} 
 

 
function nextScene() { 
 
    currentScene++; 
 
    if (currentScene > sceneCount) { 
 
    clearInterval(looper); 
 
    isPlaying = false; 
 
    return; 
 
    } 
 
    removeClass(document.getElementById("s"+currentScene),"hidden"); 
 
} 
 

 
function play() { 
 
    if (isPlaying) { 
 
    return; 
 
    } 
 
    isPlaying = true; 
 
    looper = setInterval(nextScene, 2000); 
 
} 
 

 
function pause() { 
 
    if (!isPlaying) { 
 
    return; 
 
    } 
 
    isPlaying = false; 
 
    clearInterval(looper); 
 
} 
 

 
document.getElementById("play").onclick=function(){play();}; 
 
document.getElementById("pause").onclick=function(){pause();};

.hidden { 
 
    display: none; 
 
}

<button id="play">Play</button><button id="pause">Pause</button> 
 
<div id="s1" class="hidden"> 
 
    Scene 1 
 
</div> 
 
<div id="s2" class="hidden"> 
 
    Scene 2 
 
</div> 
 
<div id="s3" class="hidden"> 
 
    Scene 3 
 
</div> 
 
<div id="s4" class="hidden"> 
 
    Scene 4 
 
</div> 
 
<div id="s5" class="hidden"> 
 
    Scene 5 
 
</div> 
 
<div id="s6" class="hidden"> 
 
    Scene 6 
 
</div> 
 
<div id="s7" class="hidden"> 
 
    Scene 7 
 
</div> 
 
<div id="s8" class="hidden"> 
 
    Scene 8 
 
</div> 
 
<div id="s9" class="hidden"> 
 
    Scene 9 
 
</div> 
 
<div id="s10" class="hidden"> 
 
    Scene 10. Story Over. Click reload and click play to start again. 
 
</div>