Calculate the reading time of a webpage【计算网页的阅读时间】

45 阅读3分钟

As a web developer, you might want to let users know how long it will take to read the content on your webpage. This is especially helpful if they're in a hurry. In this post, we'll show you how to use JavaScript to calculate the reading time of a webpage.【作为web开发人员,你可能想让用户知道阅读网页内容需要多长时间。如果他们赶时间,这将特别有帮助。在本文中,我们将向你展示如何使用JavaScript来计算网页的阅读时间。】

First, we need to figure out the average reading speed of our users. According to research, most adults read at a speed of about 200-300 words per minute (WPM). However, this can vary depending on factors like age, language, and reading comprehension.【首先,我们需要弄清楚用户的平均阅读速度。根据研究,大多数成年人的阅读速度大约是每分钟200-300个单词(WPM)。然而,这可能会因年龄、语言和阅读理解等因素而有所不同。】

For this post, we'll use an average reading speed of 250 WPM.

【在这篇文章中,我们将使用250 WPM的平均阅读速度。】

Next, we need to count the number of words on the webpage. We can do this using JavaScript by selecting the element that contains the content and using the textContent property to get the text. Then, we can split the text into an array of words with the split() method and count the number of words with the length property.

【接下来,我们需要计算网页上的单词数。我们可以使用JavaScript来选择包含内容的元素,并使用textContent属性获取文本。然后,我们可以使用split()方法将文本拆分成单词数组,并使用length属性计算单词数。】

Here's an example of the code:

【以下是代码示例:】

const content = document.querySelector('#content');
const words = content.textContent.split(' ');
const numWords = words.length;

Now that we have the average reading speed and word count, we can calculate the reading time. We can do this by dividing the word count by the average reading speed and rounding up to the nearest minute.

【现在我们有了平均阅读速度和字数,我们就可以计算阅读时间了。我们可以通过将字数除以平均阅读速度并四舍五入到最接近的分钟来实现这一点。】

Here's a code example:

【以下是代码示例:】

// Words per minute
const readingSpeed = 250;
const readingTime = Math.ceil(numWords / readingSpeed);

Finally, we can display the reading time to the user. We can select an element on the page to display the reading time and set its textContent property to the calculated reading time.

【最后,我们可以向用户显示阅读时间。我们可以在页面上选择一个元素来显示阅读时间,并将其“textContent”属性设置为计算的阅读时间。】

Here's an example of the code in action:

【下面是一个代码的示例:】

const readingTimeEle = document.querySelector('#reading-time');
readingTimeEle.textContent = `${readingTime} minute read`;

Conclusion

In this post, we've learned how to calculate how long it takes to read a webpage using JavaScript. By giving users an estimate of how much time they'll need to read your content, you can improve their experience and help them manage their time more effectively.

【在这篇文章中,我们学习了如何计算使用JavaScript阅读网页所需的时间。通过让用户估计他们阅读您的内容所需的时间,您可以改善他们的体验,帮助他们更有效地管理时间。】

资料:

especially

adv.

尤其;特别;格外

adults

n.

(法律上指能为自己的行为负责的)成年人;成年动物

adult的复数

factors

n.

因素;因子;因数;要素;(增或减的)数量,倍数

v.

(数学)分解…的因子,将…分解成因子;做代理商(或管家);把…因素包括进去;以代理商(或管家等)的身份行事

factor的第三人称单数和复数

count by

间隔数

estimate

v.

估计;估算;估价

n.

估价;(对数量、成本等的)估计;估计的成本

effectively

adv.

有效地;实际上;事实上

原文:phuoc.ng/collection/… 语雀翻译原文:www.yuque.com/fengjutian/… 《🌟Calculate the reading time of a webpage【计算网页的阅读时间】》