javascript - 如何让最后一个字母闪烁？

Question

这是我用于自打文本的代码，我想让最后一个字母闪烁，我该如何实现？

我尝试使用计时器让字母闪烁，但对于我正在尝试做的事情来说，这不是一个很好的解决方案。

这是它的样子:https://gyazo.com/97a4ef9866fb9d925da1f47ff0b9b21f ，我想实现类似cmd的效果。

<div style="color:#c0c0c0;font-size:72px;font-family:Windows Command Prompt;font-weight:normal;font-style:normal;text-align:left;text-decoration:none;" id="text_scroller"></div>
<script type="text/javascript">
var messages = new Array
(
   'Click here to begin_'
);
var speed = 150;
var currentMsg = 0;
function doScroller(text, pos, direction)
{
   var text_scroller = document.getElementById('text_scroller');
   text_scroller.innerText = '//' + text.substring(0, pos) + '';

   pos += direction;
      if (pos > text.length)
   {
      text = ' '
   }
      else
   {
     if (pos < 0)
     {
        currentMsg++;
        if(currentMsg >= messages.length)
          currentMsg = 0;
        text = messages[currentMsg];
        direction = -direction;
     }
     setTimeout('doScroller("'+text+'",'+pos+','+direction+')', speed);
   }
}
doScroller(messages[0], 0, 1);
</script>

Answer 1

如果你想让_闪烁，那么可以通过纯CSS来实现。

.blinker:after {
  content: '_';
  display: inline-block;
  animation: blink 1s infinite;
  font-weight: bold;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="blinker">
  Hello
</div>