我正在使用这个 JavaScript 函数在 div 之间切换:
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
我尝试了一点文本动画，但问题是文本动画应该在我从第 1 页到达第 2 页时开始。但是，当我加载页面时，来自 javascript 的文本动画就会运行，我是仍在第 1 页。
这是完整的 html 页面:
<!DOCTYPE html>
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
<a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
</div>
<div id="Page2" style="display:none">
<div id="typedtext"></div>
<script>
var aText = new Array(
"hey man",
"how are you",
"how is it going"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
function typewriter()
{
sContents = ' ';
iRow = Math.max(0, iIndex-iScrollAt);
var destination = document.getElementById("typedtext");
while ( iRow < iIndex ) {
sContents += aText[iRow++] + '<br />';
}
destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
if ( iTextPos++ == iArrLength ) {
iTextPos = 0;
iIndex++;
if ( iIndex != aText.length ) {
iArrLength = aText[iIndex].length;
setTimeout("typewriter()", 500);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}
window.onload = typewriter();
</script>
<a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
</div>
</body>
</html>
我怎样才能让javascript函数在我点击进入第2页后显示第2页div后才开始运行？
最佳答案
如果要显示的元素的 ID 为 "Page2"，您应该只执行 typewriter 函数。
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
if(shown === 'Page2'){
typewriter();
}
return false;
}
实例:
<!DOCTYPE html>
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display = 'block';
document.getElementById(hidden).style.display = 'none';
if (shown === 'Page2') {
typewriter();
}
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
<a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
</div>
<div id="Page2" style="display:none">
<div id="typedtext"></div>
<script>
var aText = new Array(
"hey man",
"how are you",
"how is it going"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
function typewriter() {
sContents = ' ';
iRow = Math.max(0, iIndex - iScrollAt);
var destination = document.getElementById("typedtext");
while (iRow < iIndex) {
sContents += aText[iRow++] + '<br />';
}
destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
if (iTextPos++ == iArrLength) {
iTextPos = 0;
iIndex++;
if (iIndex != aText.length) {
iArrLength = aText[iIndex].length;
setTimeout("typewriter()", 500);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}
</script>
<a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
</div>
</body>
</html>关于javascript - div为 'shown'后才运行Javascript，显示:block，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63420864/