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来实现。

＆＃13;

.blinker:after {
  content: '_';
  display: inline-block;
  animation: blink 1s infinite;
  font-weight: bold;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

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

＆＃13;

Answer 2

使用普通css：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，这不会影响IE9或更低版本，并且需要Safari 4.0 - 8.0中的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，所以我不知道如果我在逻辑上写它，但它确实适用于我的目的。

如何使最后一个字母闪烁？

3 个答案: