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

    通过ajax提交大数据 $.ajax({ url:"", data:{xx:xx} }) 这样子大大的字符串四五个一块提交.导致的提交的请求太大 idea报错 浏览器页面报错 解决 ...

  2. Python数据库连接池DBUtils

    Python数据库连接池DBUtils   DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不 ...

  3. Jenkins+Gradle+Sonar进行Java项目代码分析

    Jenkins+Maven+Sonar与Jenkins+Gradle+Sonar配置方法很相似,区别就是Java项目所用的编译工具不同,一个是maven,一个是gradle 使用maven编译工具的可 ...

  4. webpack 打包问题

    Project is running at http://localhost:8080/webpack output is served from /dist/webpack: wait until ...

  5. VNC 分辨率修改

    正确的: vncserver -geometry 1280x1024 错误的: vncserver -geometry 1280*1024

  6. php + mysql 存入表情 【如何转义emoji表情，让它可以存入utf8的数据库】

    方法1:base_encode64 这种方法是可以,但是旧数据没有经过encode操作,取数据的时候如果统一进行decode的话,旧数据会丢失的. 1 方法2:urlencode 这个似乎可以,对没有 ...

  7. 1，fiddler的工作原理和安装

    1,工作原理就是通过设置代理监控客户端和服务端的协议 2,fiddler的安装 1,官方的下载地址:https://www.telerik.com/download/fiddler 一步步安装即可 2 ...

  8. python 09 文件操作

    一 流程: #1. 打开文件,得到文件句柄并赋值给一个变量 #2. 通过句柄对文件进行操作 #3. 关闭文件 二 例子 #1. 打开文件,得到文件句柄并赋值给一个变量f=open('a.txt','r ...

  9. java添加菜单项目

  10. sql server 临时库文件太大 迁移tempdb数据库

    由于装SQL Server时默认装在系统盘,使用一段时间后,tempdb数据库占了68G,导致整个C盘爆满,彻底解决办法就是迁移tempdb物理文件,移至其他大空间磁盘上. 将 tempdb 从其在磁 ...