title:(打字机效果源码)
cover:(https://img2020.cnblogs.com/blog/1957096/202005/1957096-20200527110106198-1974765350.jpg)
link:(https://github.com/Himmeltala/learnplace/tree/main/Web%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/ECMAScript/01-practice)
参数名称 |
描述 |
默认值 |
texts |
打印文本数组,依次打印,一段文字结束之后将从头开始 |
- |
typingSpeed |
打印速度,从文本开始到结束打印的速度 |
100 |
eraseSpeed |
回退速度,从文本结束到开始回退的速度 |
20 |
eraseDelay |
打印一段文字之后,停留多久开始回退 |
2000 |
blinkSpace |
光标距离文本末尾处的距离 |
5 |
<!DOCTYPE html>
<html lang="en">
<head>
<title>打字机效果</title>
</head>
<body>
<div id="typewriter" class="typewriter"></div>
<script>
// ... 源码详见 Github 仓库
const texts = [
"你好,很高兴认识你,接下来将自我介绍,",
"我是一个 Web <Developer />,",
"技术栈:Vue.js、React.js,",
"喜欢日漫、游戏,",
"座右铭:Time tick away, dream faded away!",
];
const typewriter = new Typewriter({ texts });
typewriter.type();
</script>
</body>
</html>