前两天看到某个网站上的输入框有个小特效：文字逐个显示，并且到字符串最大长度后，逐个消失，然后重新循环显示消失，循环显示字符串数组。我对这个小特效有点好奇，于是今天自己尝试用jquery写一个简单的小demo，终于把效果整出来了。首先看一下实现后的效果：
接下来上代码。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字逐个显示逐个消失title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<style type="text/css" rel="stylesheet">
#inputArea{ /*简单设置input框的一些属性 */
margin: 30px;
width: 300px;
height: 50px;
font-size: 20px;
border: 1px solid #cccccc;
}
style>
head>
<body>
<input id="inputArea" type="text"/>
<script type="text/javascript">
let arr = ["yjry.com", "yjry.cn", "yjry.org", "yjry.xyz", "yjry.top"];//定义要显示的字符串数组
let index = 0;//显示的字符串索引，默认从数组中第一个字符串开始显示
let str = "";//存放要显示的字符串
$input = $("#inputArea");//获取input框的jquery对象
let timer1 = null;//定义两个定时器
let timer2 = null;
let endIndex1 = 1;//定义字符串截取的索引位置，两个索引分别用于显示和消失
let endIndex2 = 0;
let flag = false;//判断当前字符串是否显示完毕
$(function () {//dom树加载完成后执行操作，类似但不同于js的window.onload
timer1 = setInterval(add, 300);//设置两个定时器
timer2 = setInterval(remove, 300);
});
function remove() {
if(flag === true){
clearInterval(timer1);//清除显示的定时器
str = arr[index];//获取当前显示的字符串，利用另一个索引实现循环消失
endIndex1 = endIndex2;
$input.val(str.substring(0, endIndex2--));
if(endIndex1 === 0){//若当前字符串全部消失，则index加一，并设置flag为false，重新设置显示定时器
index += 1;
if(index === 5){//若当前索引最后一个字符串消失完毕，则将索引重置为0
index = 0;
}
flag = false;
timer1 = setInterval(add, 300);
}
}
}
function add() {
if(flag === false){
str = arr[index];
endIndex2 = endIndex1;
$input.val(str.substring(0, endIndex1++));
if($input.val().length === arr[index].length){//若当前字符串全部显示完毕，则设置flag为true
flag = true;
}
}
}
script>
body>
html>
这个方法完全是个人想出来的，如果有什么不足之处或者有可优化的地方，欢迎大家和我交流！
Original: https://www.cnblogs.com/yjry-th/p/10129238.html
Author: yjry-th
Title: 使用jquery实现文本框输入特效：文字逐个显示逐个消失反复循环
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/574619/
转载文章受原作者版权保护。转载请注明原作者出处！