基于JavaScript实现惊艳的打字机效果
作者：哇子学代码
这篇文章主要为大家详细介绍了如何使用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中实现打字效果，得利用js，首先定义一个字符串数组，用于在打字机中切换文字，然后定义一个函数将数组中的字放到内容中，每次切换后索引+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()
这其实已经能实现切换了，只是没有打字效果，我们再利用js，用于显示一个个字符的显示，利用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打字机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！