如何在单击按钮时暂停和继续执行html页面

Question

我正在尝试创建一个类似于视频的网页。因此，当用户按下按钮并从该点继续时，我需要暂停网页。

Answer 1

你不能暂停＆＃34;随意执行HTML。您可以通过用户或使用计时器通过操作（按钮点击）显示项目（最初使用css隐藏）来控制网站gets revealed的不同部分何时以及如何使用javascript。请参阅setTimeout和setInterval

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

暂停和播放的示例显示：

＆＃13;

＆＃13;

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();};

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;