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

    # 20175126 2016-2017-2 <Java程序设计>第七周学习总结 ## 教材学习内容总结 - 本周学习方式主要为手动敲代码并理解内容学习. - 学习内容为教材第八章,本章主 ...

  2. MTD的认识

    MTD即内存计数设备,是linux中对ROM.NORFLASH.NAND  Flash等存储设备抽象出来的一个设备层,它向上提供统一的访问接口:读写.擦除等:屏蔽了底层硬件的操作.各类存储设备的差别. ...

  3. 迁移virtualenv环境

    记录一次将window上的virtualenv部署至LINUX服务器 前提 你已经使用virtualenv创建了一个虚拟的python运行环境,并且已经完成了你的应用的开发,现在需要将工程部署到服务器 ...

  4. nginx 添加response响应头

    硬添

  5. https与http的区别

    HTTPS协议 由于http协议中,服务器和客户端之间传输的报文是明文,很容易被攻击截取,为了保证一些敏感信息的安全,https协议在http的基础上加了一层SSL协议,依靠证书来保证服务器和客户端之 ...

  6. 关于webservlet 请求异步处理,链接未关闭出现的bug

    webservlet  +redis 的消息发布订阅 ,挺好的 当请求到来,向redis server申请一个频道 ,然后等着另一端架设是B 处理完毕获得到处理信息调用redis ,使用redis 往 ...

  7. Oracle 12c 创建新的数据库实例、用户

    前提:安装好了Oracle 12c数据库,已有一个数据库实例xe,登录用户/密码:system/oralce 我用的是docker安装的Oracle 12c的实例: docker run --name ...

  8. experiment 3

    #include <stdio.h> int main() { int number, max, min, n; n=; printf("请输入%d个数: ", n); ...

  9. Java第4次实训作业

    编写"电费管理类"及其测试类. 第一步 编写"电费管理"类 私有属性:上月电表读数.本月电表读数 构造方法:无参.2个参数 成员方法:getXXX()方法.se ...

  10. TCP与UDP基本认识及区别

    TCP与UDP基本区别 1.基于连接与无连接 2.TCP要求系统资源较多,UDP较少: 3.UDP程序结构较简单 4.流模式(TCP)与数据报模式(UDP); 5.TCP保证数据正确性,UDP可能丢包 ...