本文介绍如何使用JavaScript控制HTML元素的显示与隐藏，实现故事叙述中的暂停、定时揭示和用户交互。通过setTimeout和setInterval函数，结合removeClass和revealDivInTime函数，展示了如何在不同时间点逐步揭示div元素。实例演示了如何在前端开发中运用定时器和用户触发事件来控制页面内容的动态展示。
你不能“暂停”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;
}
Click to start story: click me
First Part of story revealed after 1 second
Second Part of story revealed after 5 seconds
Third Part of story revealed after 10 seconds
Click this button to finish Story: Finish
This get's revealed only after user clicks on button in story part 3. Story will end in 3 seconds
Story finished
实例表明：
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").οnclick=function(){play();};
document.getElementById("pause").οnclick=function(){pause();};
.hidden {
display: none;
}
PlayPause
Scene 1
Scene 2
Scene 3
Scene 4
Scene 5
Scene 6
Scene 7
Scene 8
Scene 9
Scene 10. Story Over. Click reload and click play to start again.
扫一扫
7082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
