如何在 HTML/CSS/JavaScript 中的 TypeWriter 效果后放置閃爍 _

Question

我正在嘗試使用打字機效果 output Hello World_ 並讓 _ 閃爍。 目前，我正在使用 HTML 和 CSS 使 _ 閃爍，我正在使用 Javascript 在打字機效果中輸入 Hello World。 目前我的代碼打印出 _ 然后是 Hello World。 我一直很難讓它看起來像 Hello World_ 下划線仍在閃爍。 謝謝！

<div id = "HelloWorld">
  <h1 id = "demo">
    <span class = "blink_me">_</span>
  </h1>
</div>

<script>
  var i = 0;
  var txt = 'Hello World';
  var speed = 150;

  (function typeWriter() {
    if (i < txt.length) {
      document.getElementById("demo").innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  })();
</script>


.blink_me {
  animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }

Output

如您所見，我的 output 是 _Hello World，但我正在嘗試獲取 Hello World_，而 _ 仍在閃爍。 謝謝！

Answer 1

我將給出兩個解決方案。

方法一。

使用規則direction: rtl到#demo 。 此規則將通過交換元素來反轉您的元素。

只需將其添加到您的 css 中：

#demo {
    display: inline-block;
    direction: rtl;
}

 var i = 0; var txt = "Hello World"; var speed = 150; (function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } })();

 #demo { display: inline-block; direction: rtl; }.blink_me { animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }

 <div id="HelloWorld"> <h1 id="demo"> <span class="blink_me">_</span> </h1> </div>

方法2。

為動畫文本創建一個額外的 span 標簽，指定任何 class 或 id。 像這樣：

<h1 id="demo">
    <span class="text_out"></span>
    <span class="blink_me">_</span>
</h1>

 var i = 0; var txt = "Hello World"; var speed = 150; (function typeWriter() { if (i < txt.length) { document.getElementsByClassName("text_out")[0].innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } })();

 .blink_me { animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }

 <div id="HelloWorld"> <h1 id="demo"> <span class="text_out"></span> <span class="blink_me">_</span> </h1> </div>