如何使最后一個字母閃爍？

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> 

Answer 2

使用普通的CSS：

 .writer:after { content: "_"; animation: blink 1s infinite; } @keyframes blink { 0% {opacity: 1;} 1% {opacity: 0;} 50% {opacity: 0;} 51% {opacity: 1;} } 

 <span class="writer">Test</span> 

請注意，這將不支持IE9或更低版本，並且在Safari webkit-中需要webkit-前綴。

Answer 3

<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 == 20)
   {
      direction = -direction;
   }

   if (pos == 19)
   {
      direction = 1;
      speed = 500;
   }



     setTimeout('doScroller("'+text+'",'+pos+','+direction+')', speed);
}
doScroller(messages[0], 0, 1);
</script>

這就是我想要做的。 我對JavaScript的了解不多，因此我不知道是否邏輯地編寫它，但是它確實可以滿足我的目的。