动态输入案例（text）

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
            //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。


            //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
            //步骤：
            //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
            //2.定时器。
            //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
            //4.判断，如果文字的个数和数组的长度一样了，就清除定时器

            //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
            var str = "红鲤鱼与绿鲤鱼与驴";
            var arr =  str.split("");
            var str2 = "";
            var num = 0;
            var timer = null;

            $(".typed-cursor").show();
            //2.定时器。
            timer = setInterval(function () {
                //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
                if(arr[num] === undefined){
                    clearInterval(timer);
                    $(".typed-cursor").hide();
                }else{
                    //定义一个字符串用来接收
                    str2 += arr[num];
                    //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
                    $(".word").text(str2);
                    //索引值自增
                    num++
                }
            },200);


            //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容
            $("#btnSay").click(function () {
                str = $("#inValue").val();
                $("#inValue").val("");
                arr =  str.split("");
                str2 = "";
                num = 0;
                //2.定时器。
                timer = setInterval(function () {
                    //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
                    if(arr[num] === undefined){
                        clearInterval(timer);
                        $(".typed-cursor").hide();
                    }else{
                        //定义一个字符串用来接收
                        str2 += arr[num];
                        //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
                        $(".word").text(str2);
                        //索引值自增
                        num++
                    }
                },200);
            });


        });
    </script>
</head>

<body>

    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>


</body>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
动态输入案例（text）

动态输入案例（text）

相关阅读更多精彩内容

友情链接更多精彩内容
