javascript - 如何提高打字机效果速度？并增加光标大小？

Question

我成功添加了这个插件:https://safi.me.uk/typewriterjs 。我可以调整删除速度，但不确定如何调整实际打字速度？另外，我想让闪烁的光标比我的实际字体/文本大小稍大一些。

1. 如何向 js 添加/写入打字速度？
2. 如何更改闪烁光标的大小？

如有任何帮助，我们将不胜感激!谢谢。

迈克

Answer 1

基本上您需要添加两个附加选项。

延迟 - 控制光标的速率

cursorClassName - 控制应用于实际光标的类。

对于延迟，您可以以毫秒为单位进行设置。

对于cursorClassName，你基本上只需要创建一个css类，设置大小，然后做任何你想做的事情。

此外，您还可以将其附加到 Typewriter 构造函数中。

示例:

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
    loop: true,
    delay: 1000, // SET TO USE A 1 SECOND DELAY
    cursorClassName: 'cursorSize' // SET TO MY CUSTOM CLASS NAME
});

typewriter.typeString('Hello World!')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Strings can be removed')
    .pauseFor(2500)
    .deleteChars(7)
    .typeString('<strong>altered!</strong>')
    .pauseFor(2500)
    .start();

.cursorSize {
  font-size: 75px; /*Setting this to a ridiculous size as an example*/
  color: red;
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.js"></script>
<div id="app"></div>

在上面的代码片段中，您将看到我为光标设置了一个荒谬的大小。这是故意的。我还将其设置为红色和斜体，以便您可以看到它确实正在更新。

至于延迟，我延迟了 1 秒，但你可以随意设置它的快慢。