jQuery如何实现文本框输入特效:文字逐个显示逐个消失反复循环
沉沙 2019-01-03 来源 : 阅读 1704 评论 0

摘要:本篇教程探讨了jQuery如何实现文本框输入特效:文字逐个显示逐个消失反复循环,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇教程探讨了jQuery如何实现文本框输入特效:文字逐个显示逐个消失反复循环,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

jQuery如何实现文本框输入特效:文字逐个显示逐个消失反复循环

<

接下来上代码。
<!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>    

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程