动态输入展示内容

May 13, 2018

5859 views

3033 words

描述：用户输入什么内容，点击按钮后，上面就动态显示什么内容。jquery版本1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态输入案例</title>
    <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.min.js"></script>
    <script>
        $(function () {
            //动态展示预留内容
            var str = "小宁博客";
            var arr = str.split("");
            var str2 = "";
            var num = 0;
            var timer = null;
            $(".typed-cursor").show();
            timer = setInterval(function () {
                if(arr[num]===undefined){
                    clearInterval(timer);
                    $(".typed-cursor").hide();
                }else {
                    str2 += arr[num];
                    $(".word").text(str2);
                    num++;
                }
            },200);
            //动态展示输入的内容
            $("#btnSay").click(function () {
                str = $("#inValue").val();
                $("#inValue").val("");
                arr = str.split();
                str2 = "";
                num = 0;
                timer = setInterval(function () {
                    if(arr[num]===undefined){
                        clearInterval(timer);
                        $(".typed-cursor").hide();
                    }else {
                        str2+=arr[num];
                        $(".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>
</html>

动态输入展示内容