Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tạo hiệu ứng gõ chữ (typing effect) với JavaScript


Để tạo hiệu ứng gõ chữ với JavaScript, mã như sau:

Ví dụ

<!DOCTYPE html> <html> <head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: rgb(128, 19, 218);       color:white;       border:none;    }    .heading{       color:crimson;    } </style> </head> <body> <h1>typeText</h1> <button class="typeButton">Click me</button> <h2 class="heading"></h2> <script>    document.querySelector('.typeButton').addEventListener('click',typeText);    var i = 0;    var text = 'This text is currently being typed across... It is still typing..';    var speed = 50;    function typeText() {       if (i < text.length) {          document.querySelector('.heading').innerHTML += text.charAt(i);          i++;          setTimeout(typeText, speed);       }    } </script> </body> </html>

Kết quả

Mã trên sẽ tạo ra đầu ra sau:

Tạo hiệu ứng gõ chữ (typing effect) với JavaScript

Khi nhấn nút 'Click me':

Tạo hiệu ứng gõ chữ (typing effect) với JavaScript