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>