本文介绍如何使用JavaScript实现打字机效果，通过定义字符串数组和定时器，逐步显示和删除字符，最终实现动态文字切换效果。
实现打字机效果
首先，我们需要准备一个HTML模板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
color: white;
}
#switch-box {
color: #0cc4fb;
}
</style>
</head>
<body>
我要成为
<span id="switch-box"></span>
高手
</body>
</html>
在switch-box中实现打字效果，需要利用JavaScript。首先定义一个字符串数组，用于在打字机中切换文字，然后定义一个函数将数组中的字放到内容中，每次切换后索引+1，然后循环调用这个函数,当索引大于数组长度的时候，把索引重新归0。
const stringArray = ['C++','Go','Java','Js','PHP']
let switch_box = document.getElementById('switch-box')
// 定义数组索引
let index = 0
let delay = 500
let changeText = () => {
switch_box.textContent = stringArray[index]
index ++
if(index >= stringArray.length){
index = 0
}
setTimeout(changeText,delay)
}
changeText()
这其实已经能实现切换了，只是没有打字效果，我们再利用JavaScript，用于显示一个个字符的显示，利用substring切割字符，每次字符数量+1，当切割全部的时候，就该执行删除了，所以应该定义一个删除的标志，在删除完之后，就应该切换到下一个字符了。
下面是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
color: white;
}
#switch-box {
color: #0cc4fb;
}
</style>
</head>
<body>
我要成为
<span id="switch-box"></span>
高手
<script>
const stringArray = ['C++','Go','Java','Js','PHP']
let switch_box = document.getElementById('switch-box')
// 定义数组索引
let index = 0
let delay = 0
let charIndex = 0
// 删除标志
let isDelete = false
let defaultDelay = 300
let waitDalay = 1000
let changeText = () => {
switch_box.textContent = stringArray[index].substring(0,charIndex);
if(!isDelete){
delay = defaultDelay
charIndex ++
if(charIndex > stringArray[index].length){
// 当charIndex已经大于字符的长度的时候，表示应该执行删除动画了
isDelete = true
delay = waitDalay
}
}else{
delay = defaultDelay
charIndex --
if(charIndex < 1){
isDelete = false
index ++
if(index >= stringArray.length){
index = 0
}
}
}
setTimeout(changeText,delay)
}
changeText()
</script>
</body>
</html>
最后补充下文字后的光标闪烁效果
/*打字样式光标*/
#switch-box::after {
content: "I";
font-size: 18px;
display: inline-block;
vertical-align: top;
font-weight: lighter;
animation: flicker .5s infinite;
}
/*光标闪烁动画*/
@keyframes flicker {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
效果图
到此这篇关于基于JavaScript实现打字机效果的文章就介绍到这了,更多相关JavaScript打字机内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！