blog_1
/
js打字机.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(43, 52, 82);
        }
        .text{
            font-family: 'fangsong';
            display: inline-block;
          position: relative;
          font-size: 40px;
          height: 60px;
          line-height: 60px;
          color: rgb(245, 245, 245);
        }
        .text::after{
            content: '';
            position: absolute;
            right: -10px;
            top: 5px;
            height: 50px;
            width: 3px;
            background-color: #fff;
            animation: san 0.5s steps(1) infinite;
        }
        @keyframes san{
            0%,100%{
                background-color: #fff;
            }
            50%{
               background-color: transparent;
            }

        }
    </style>
</head>
<body>
    <h1>
        <span class="text" ></span>
    </h1>
    <script>
        const text = document.querySelector('.text');
        const txt  =["北极光之夜。","夜越黑，星星越亮。","答案在风中飘荡。"];

        var index=0;
        var xiaBiao= 0;
        var huan = true;

        setInterval(function(){

            if(huan){
                text.innerHTML = txt[xiaBiao].slice(0,++index);
                console.log(index);
            }
            else{
                text.innerHTML = txt[xiaBiao].slice(0,index--);
                console.log(index);
            }

            if(index==txt[xiaBiao].length+3)
            {
                huan = false;
            }
            else if(index<0)
            {
                index = 0;
                huan = true;
                xiaBiao++;
                if(xiaBiao>=txt.length)
                {
                    xiaBiao=0;
                }
            }

        },200)

    </script>
</body>
</html>