Text Typing là hiệu ứng giúp bạn có thể hiển thị được nhiều thông điệp trong một khoảng không gian. Các thông điệp thay phiên nhau hiển thị theo kiểu đánh máy, chuỗi được hoàn thiện từng bước sau đó chuyển sang chuỗi tiếp theo.
Đây là cách hiển thị thông minh giúp website trở nên sinh động, tạo điểm nhấn cho người dùng.
Sau khi xem phần hướng dẫn này bạn được ôn tập kỹ năng html css cơ bản sau đó biết cách phân tích bài toán và chia nhỏ xử lý từng bước một để hoàn thiện chức năng.
Bạn sẽ hiểu sâu hơn về mảng và các xử lý chuỗi… đây là video hứa hẹn mang lại cho bạn những kỹ năng bổ ích để từ đó hoàn thiện tư duy kỹ năng lập trình web của mình.
Mã code hướng dẫn tạo Typing Text
Ngôn ngữ sử dụng:
- Html
- Css
- Javascript
Phần mềm code: Visual Studio Code
Cấu trúc folder
text-typing
|--index.html
|--app.js#1. Tạo giao diện html css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<title>Text Typing...</title>
</head>
<body>
<style>
body{
font-family: "Noto Sans";
background-color: black;
}
h1{
color: #fff;
font-size: 2rem;
font-weight: 500;
}
span#hightlight{
color: greenyellow;
}
</style>
<h1>Unitop.vn <span id="hightlight">Học web đi làm</span></h1>
<script src="app.js"></script>
</body>
</html>
#2. Code xử lý Javascript
const hightlight = document.getElementById("hightlight");
// console.log(hightlight);
const messages = [
"Học web đi làm",
"Kèm cặp qua nhóm kín",
"Tạo dự án thực tế",
"Lương 8 đến 30tr/tháng",
];
let messLength = messages.length;
// console.log(messLength);
let messIndex = 0;
let charIndex = 0;
function typing(messIndex) {
let currentMess = messages[messIndex];
if (charIndex < currentMess.length) {
let currentChar = currentMess.substring(0, charIndex + 1);
// console.log(currentChar);
hightlight.textContent = currentChar;
charIndex ++;
}else{
if(messIndex < messLength - 1){
messIndex ++;
}else{
messIndex = 0;
}
charIndex = 0;
}
// console.log(currentMess);
setTimeout(typing, 150, messIndex);
}
typing(0);
Tổng kết
Qua bài viết này unitop đã chia sẻ đến bạn cách xây dựng chức năng Text Typing bằng html, css và Js. Phần quan trọng nhất trong bài học này chính là tư duy thuật toán để xử lý hiển thị thông điệp nhịp nhàng chính xác.
Việc của bạn ngay bây giờ hãy bắt tay vào thực hành lại chức năng này trên máy tính của mình dựa theo nội dung tôi vừa chia sẻ ở video.
Rất nhiều người khi theo dõi bài hướng dẫn này sẽ cảm thấy hơi bối rối và không hiểu hết 100%. Điều đó hoàn toàn dễ hiểu, quá trình phát triển kỹ năng lập trình cần một hành trình kiên trì và học bài bản theo cách đúng đắn.
Nếu bạn quyết định học bài bản đi làm bạn nên xem qua lộ trình học web đi làm unitop.vn và tôi là người trực tiếp đào tạo và kèm cặp cho tới khi đi làm có công việc tốt.
Mong sớm nhận tin vui từ bạn!
Phan Văn Cương và cộng sự
P/s: Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!
Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.
Hẹn gặp lại!