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

    前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. Nginx.conf配置 # 定义Nginx运行的用户 和 用户组 如果对应服务器暴露在外 ...

  2. linux服务配置

    1,开机初始化的配置 iptables -F 清空防火墙 /etc/init.d/iptables stop  #关闭iptables setenforce 0  #暂停selinux #编译安装py ...

  3. Synchronized和Lock的区别

    ①synchronized是jvm的关键字,Lock是Java类: ②synchronized会自动释放锁,而Lock需要在finally语句中主动释放锁,否则会造成死锁 ③用synchronized ...

  4. nginx学习笔记(二)

    nginx变量 Nginx 变量值容器的生命期是与当前正在处理的请求绑定的,而与 location 无关. 通过 set 指令隐式创建的 Nginx 变量.这些变量我们一般称为"用户自定义变 ...

  5. 编辑gif

    在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...

  6. 机器学习之支持向量机（SVM）学习笔记

    支持向量机是一种二分类算法,算法目的是找到一个最佳超平面将属于不同种类的数据分隔开.当有新数据输入时,判断该数据在超平面的哪一侧,继而决定其类别. 具体实现思路: 训练过程即找到最佳的分隔超平面的过程 ...

  7. Eclispe 错误：找不到或无法加载加载主类

    解决办法: Project --> Clean Clean 操作会将该 project 以前的所有编译信息清空,然后默认将所有工程的所有 .java 文件都进行一次编译,这样的话就可以方便的进行 ...

  8. 2-1 如何抓不同的接口（手机抓包，web网页抓包）

    举个例子,一个测试和安卓的对话. 测试:Android你这里有个bug Android:这是服务端的bug 测试:是你这里显示的不对 Android:你去看服务端返回数据,他不对,你会不会测试. 从这 ...

  9. win 常用CMD命令备忘

    一.进入某个硬盘 1.直接输入盘符加冒号,如想进入D盘,则输入命令[d:] . 命令:C:\Windows\system32>d: 结果:d:\> 二.进入某个文件夹 1.输入cd加文件夹 ...

  10. Jquery源码学习日记(1)

    https://jquery.com/  最新源码下载链接:jquery3.0 135-231定义了一些jquery的通用方法 233-301行定义了一些继承的方法 302-477定义了一些工具类方法 ...