使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环
程序员文章站
2022-09-04 14:56:18
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组。我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小demo,终于把效果整出来了。首先看一下实现后的效果: 接下来上代码。 这个方法完全是个人想出来的,如 ......
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组。我对这个小特效有点好奇,于是今天自己尝试用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><!--引入jquery插件 --> <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>
这个方法完全是个人想出来的,如果有什么不足之处或者有可优化的地方,欢迎大家和我交流!