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

    dfs: 注意matlab里面的全局变量的使用 test.m: clc; clear; global A ii dx dy vis minpath path A=... [1 1 1 1 1 1 1 ...

  2. FragmentManager中Fragment的重复创建、复用问题

    当我们在Activity中使用 Fragment可以用FragmentManager去添加到对应个ViewGoup中使用 FragmentManager fragmentManager = getSu ...

  3. Spring Scheduled定时任务报错 java.lang.IllegalStateException: Encountered invalid @Scheduled method 'xxx': For input string: "2S"

    报错信息如下: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'ding ...

  4. [Battle]Battle章1 Presto VS Impala

    Round One: 平局:共同点就是吃内存; Round Two: Impala胜 Impala查询性能稍领先于presto Round Three: presto胜 presto在数据源支持上非常 ...

  5. WebAPI常见的鉴权方法，及其适用范围

    在谈这个问题之前,我们先来说说在WebAPI中保障接口请求合法性的常见办法: API Key + API Secret cookie-session认证 OAuth JWT 当然还有很多其它的,比如 ...

  6. Mysql数据库每天定时执行备份方法

    此数据库备份方法是简单的数据库备份方法,就是从Mysql的数据文件下,将数据库文件拷贝到指定的文件夹目录下 1.创建txt文件,添加脚本 net stop mysql xcopy D:\MySql\D ...

  7. 跟踪SQL

    在数据库中,找到以下页面,并选择事件中的Tsql下的bath...与stm...

  8. 关于TypeError: strptime() argument 1 must be str, not bytes解析

    关于TypeError: strptime() argument 1 must be str, not bytes解析   在使用datetime.strptime(s,fmt)来输出结果日期结果时, ...

  9. h5 调起ios数字键盘的坑，限制特殊字符输入方案

    最近有个需求是利率只允许输入数字和小数点,用以下 <input type="number" pattern="[0-9]*"> 在ios会调起数字键 ...

  10. PIL: 建立一个GIF图

    PIL: 建立一个GIF图 一.下载PIL库:   PIL库的下载是:pip install pillow(pillow就是PIL函数了) 二.采用以下代码(有注释): import PIL.Imag ...