前两天看到某个网站上的输入框有个小特效：文字逐个显示，并且到字符串最大长度后，逐个消失，然后重新循环显示消失，循环显示字符串数组。我对这个小特效有点好奇，于是今天自己尝试用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>

这个方法完全是个人想出来的，如果有什么不足之处或者有可优化的地方，欢迎大家和我交流！

使用jquery实现文本框输入特效：文字逐个显示逐个消失反复循环的更多相关文章

  1. Jquery实现文本框输入提示

    一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...

  2. Jquery 限制文本框输入字数【转】

    <script type="text/javascript" src="js/jquery.min.js" ></script> < ...

  3. 实现文本框默认灰色文字，点击消失，如果没输入内容可再返回原来的灰色文字(js版)

    $(document).ready(function(){ $("#biaoqian").val('这里是默认的灰色文字'); $("#biaoqian").c ...

  4. jquery判断文本框输入的是非数字内容（交流QQ群：452892873）

    isNaN($(this).val())==false   输入的是数字, isNaN($(this).val())==true  输入的是非数字内容

  5. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  6. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  7. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  8. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

  9. JQuery限制文本框只能输入数字和小数点的方法

    <input type="text" class="txt NumText"  Width="100px"  /> $(func ...

随机推荐

  1. poj 2778 AC自动机+矩阵快速幂

    题目链接:https://vjudge.net/problem/POJ-2778 题意:输入n和m表示n个病毒,和一个长为m的字符串,里面只可以有'A','C','G','T' 这四个字符,现在问这个 ...

  2. python—查找以XXX结尾的文件

    # 查找电脑所有视频 for cur_dir,dirs,files in os.walk(r'f:'): print('当前正在%s目录下查找'%cur_dir) for f in files:#当前 ...

  3. 双硬盘，win10安装到固态盘

    1.PE下格式化固态盘的系统盘 2.打开DG分区工具,查看固态盘的系统盘是否为激活状态,红色为激活,如果不是,激活一下 3.用windows安装器,或者hdd安装win10到固态盘 4.bios中启动 ...

  4. 机器学习（四）--------逻辑回归(Logistic Regression)

    逻辑回归(Logistic Regression) 线性回归用来预测,逻辑回归用来分类. 线性回归是拟合函数,逻辑回归是预测函数 逻辑回归就是分类. 分类问题用线性方程是不行的   线性方程拟合的是连 ...

  5. XA-分布式事物

    1.什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成 ...

  6. 使用jconsole分析内存情况-JVM

    JVM调优分析演练: Jconsole中对内存为如下结构: 原始代码: public static void main(String[] args) { BigInteger [] pArr=new ...

  7. Contours 等高线图

    1.画等高线 数据集即三维点 (x,y) 和对应的高度值,共有256个点.高度值使用一个 height function f(x,y) 生成. x, y 分别是在区间 [-3,3] 中均匀分布的256 ...

  8. Curl测试socks5 or http 代理命令

    测试socks5命令:curl --socks5 125.119.175.48:8909 http://example.com/ 测试http命令: curl --connect-timeout 2 ...

  9. table 的部分使用，固定行，固定列等

    主要是用多张table表格实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. Gym - 101848B Almost AP 暴力

    题目链接:http://codeforces.com/gym/101848/problem/B 给出一串数字要你最多改动三个数字使这一串数字成为等差数列.因为最多改动三个数字所以可以先求出相邻两项的差 ...