Trước đây mình đã có bài Xác định thời gian đọc ước tính của một văn bản bằng PHP, Ngoài cách tính thời gian đọc ước tính của một bài viết bằng PHP thì chúng ta có thể dùng JavaScript để làm điều đó.
Để tính thời gian đọc của một văn bản thì đầu tiên cần có nội dung và điểm hiển thị thời gian ước tính để đọc bài viết, chúng ta dùng mã HTML sau:
Ví dụ
<article id="article">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Minus ullam est commodi facere repudiandae sit. Ab quibusdam totam
veniam ducimus ut consequatur sit. Ea et nulla quaerat. Et temporibus
quas numquam quas dolor vero accusantium numquam.
</p>
<p><span id="time"></span> phút đọc</p>
</article>
Tiếp theo chúng ta sử dụng mã JavaScript sau để tính toán thời gian đọc của bài viết:
Ví dụ
function readingTime(wpm) {
const text = document.getElementById("article").innerText;
const words = text.trim().split(/\s+/).length;
const time = Math.ceil(words / wpm);
document.getElementById("time").innerText = time;
}
readingTime(200);
Dưới đây là bảng phân tích về hàm readingTime():
- text– tìm nạp văn bản bài báo để chúng tôi có thể tạo sẵn các phép tính.
- wpm– tốc độ đọc trung bình của người lớn (từ mỗi phút) (wpm: words per minute) Xem bài trước.
- words– tính tổng số từ (độ dài) bằng cách tách ở mỗi khoảng trắng.
- time– tính toán thời gian đọc được làm tròn đến số nguyên gần nhất.
Sau khi thời gian được tính toán sẽ được hiển thị tại <span id="time"></span>.
Với hướng dẫn này, bây giờ bạn đã biết thêm một cách hiển thị thời gian đọc ước tính cho một bài viết và có thể dễ dàng đưa vào blog hoặc trang web của bạn. Chúc bạn thành công!