Với sự trợ giúp của hoạt ảnh CSS, chúng ta có thể tạo hiệu ứng gõ và xóa trên máy đánh chữ bằng JavaScript.
Ví dụ sau đây cho thấy hiệu ứng này.
Ví dụ
<!DOCTYPE html>
<html>
<style>
div {
display: flex;
margin: 4%;
padding: 2%;
box-shadow: inset 0 0 12px blue;
}
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
p:last-of-type {
animation: type 0.33s infinite;
}
@keyframes type{
to { opacity: .0; }
}
</style>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
}
else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typeNow();
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
