动态输入案例-text，val练习

最新推荐文章于 2021-05-11 22:22:10 发布

zuo_zuo_blog

最新推荐文章于 2021-05-11 22:22:10 发布

阅读量176

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90176730

版权

JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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;
        }

        .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="js/jquery-1.11.1.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();
                var arr=str.split("");
                var str2="";
                var num=0;
                $(".typed-cursor").show();
                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>
        你想说的话：<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>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态输入案例-text，val练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; paddin...
复制链接

扫一扫

专栏目录