如何通過點擊按鈕暫停和恢復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>