js实现输入打字效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app{
        color: #fff;
        background-color: black;
        text-align: center;
    }
    .line{
        opacity:1;
        animation: typeobj 0.7s infinite;
    }
    @keyframes typeobj {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
</style>
<body>
    <div id="app">
        <span class="text"></span>
        <span style="color:#fff;font-size:20px;margin-left:-6px;" class="line">|</span>
    </div>
</body>
<script>
    let app = document.querySelector('.text')
    let text = '觉得对你有帮助，就点个攒吧！'
    arr = text.split('')
    write(100,0)
    let index=0
    function write(timer,index){
      setTimeout(()=>{
         app.innerHTML += arr[index]
         index++
         if(index<arr.length){
           write(timer,index)
        }
      },timer)
        
    }
</script>
</html>

 

posted on 2023-04-21 17:02  久居我梦  阅读(200)  评论(0)    收藏  举报

导航