Question

我正在使用此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页后才能开始运行？

Answer 1

仅当要显示的元素的ID为typewriter时，才应执行"Page2"函数。

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>

Answer 2

已修复-已在Codepen中进行了测试。

问题是window.load部分-窗口加载后立即调用...而不是page2，因为page2只是打开和关闭的div，所以它不是新页面。

addEventListener的书写更加清晰明了-更好地结合函数输出-onClick =“”是meh-addEventListener所在。

附加一个事件处理程序-为其页面添加一个包含用于page2的特殊逻辑的annon函数。代码在下面。

<html>
<body>
  <div id="Page1"> Content of page 1
    <a href="#" id="link1">Show page 2</a>
  </div>
  <div id="Page2" style="display:none">
  <div id="typedtext"></div>
    <a href="#" id="link2">Show page 1</a>
  </div>
</body>
</html>


function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
const link1=document.getElementById("link1");
const link2=document.getElementById("link2");
  link1.addEventListener("click", function(){
    show('Page2','Page1');
    typewriter();
  });
link2.addEventListener("click", function(){
    show('Page1','Page2');
  });
 var aText = new Array(
"hey man",
"how are you",
"how is it going"
);
var iSpeed = 1000; // 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()
{
 console.log("typing"); 
 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);
 }
}

Answer 3

而不是 onclick="return show('Page2','Page1');"
采用 onclick="function() {return show('Page2','Page1')}"

Answer 4

只需删除window.onload部分，然后将typewriter()放在return false函数中show的前面

仅在“显示” div之后才运行Javascript，显示：block

4 个答案: