如何点击Developer按钮后重启Typewriter打字机动画

你的代码存在几个核心问题，导致点击按钮后无法重启动画：

• 全局计数器i在第一次播放完成后，已经等于字符串长度，再次调用typeWriter()时会直接跳过循环
• clearBox函数里的let i = 0是局部变量，根本没修改全局的i，而且只是隐藏元素没有清空内容
• 按钮点击事件的逻辑混乱，参数传递和调用顺序都有问题

直接按下面的方式修改代码即可解决：

修改后的JavaScript代码 #

var i = 0;
var txt = "<!--Ahoj--> \n\n<name> Jmenuji se Tomáš Maixner </name>\n\n<description> Jsem front-end developer, grafický designer a web designer, ale umím toho mnohem víc. Mám zkušenosti se správou sociálních sítí, SEO, animací, produkcí i postprodukcí videa, 3D grafikou i fotografováním. </description>";
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    var char = txt.charAt(i);
    document.getElementById("demo").innerHTML += char == '\n' ? '<br>' : char;
    i++;
    setTimeout(typeWriter, speed);
  }
}

// 专门的重启函数，负责重置状态并重新播放
function restartTypewriter() {
  // 重置全局计数器
  i = 0;
  // 清空内容（不是隐藏）
  document.getElementById("demo").innerHTML = "";
  // 确保元素显示
  document.getElementById("demo").style.display = "block";
  // 启动打字机
  typeWriter();
}

function hideTypewriter() {
  document.getElementById("demo").style.display = "none";
}

修改后的HTML代码 #

<h1>Typewriter</h1>

<div class=window>
 <div class="upper-row">
  
  <div id="developer" onclick="restartTypewriter()" class="upper-row-box"><span class="developer"><></span>Developer</div>
  <div onclick="hideTypewriter()" class="upper-row-box"><span class="designer">@</span>Designer</div>
  <div  class="upper-row-box noHover"></div>
  <div class="upper-row-box noHover endBox">
    <div class="dot green"></div>
    <div class="dot yellow"></div>
    <div class="dot red"></div>
  </div>
 </div>
 <div id="coding-window" class="coding-window">
  <div class="code">
   <p id="demo"></p>
   <p id="demo2"></p>
  </div>
 </div>
</div>

修改后点击「Developer」按钮会直接：

1. 把全局计数器i重置为0
2. 清空demo元素的现有内容
3. 从头开始播放打字机动画

内容的提问来源于stack exchange，提问作者Tom Maixner