使用 JavaScript 计算一篇文章的预计阅读时间

最新推荐文章于 2024-07-31 16:33:32 发布
最新推荐文章于 2024-07-31 16:33:32 发布
阅读量242 收藏
点赞数
分类专栏： JavaScript 教程集合 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52010446/article/details/130856183
版权

您可能已经在Medium等网站上看到过显示的估计阅读时间。此指标可帮助用户决定是立即阅读文章，还是保存以供日后阅读。在本教程中，我们将使用 JavaScript 来计算一篇文章的预计阅读时间。

首先在 HTML 文档中让我们创建一个虚拟文章，如下所示：

<article id="article">
  <h1>Lorem ipsum dolor sit amet</h1>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Q shen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
redulator:Redulator —终极阅读时间计算器是一个简单的Vanilla JavaScript项目，用于计算段落文章的阅读时间。 由Al Nahian用:red_heart:制成
04-30
这个项目由Al Nahian开发，旨在提供一个简洁、高效的解决方案，帮助用户预估他们需要多少时间才能完成一篇文章的阅读。 **Vanilla JavaScript基础** Vanilla JavaScript是指不依赖任何JavaScript库或框架的原生...
bolt-readingtime:计算给定内容的预计阅读时间
05-13
Bolt CMS的阅读时间插件 该插件提供了一个简单的树枝功能，可以计算给定内容的预计阅读时间。 设置 将readingtime函数添加到模板中的某处： {{ readingtime(record.body) }} Min. 将打印类似14 Min. 。 或者将readingtiime对象存储在变量中并访问更多数据： {% set readingtime = readingtime(record.body) %} {{ readingtime.wordcount }} {{ readingtime.wordsPerMinute }} {{ readingtime.wordsPerSecond }} {{ readingtime.readingTimeMinutes }} {{ readingtime.readingTimeSeconds }} 配置 wordsPerMinute （
文章阅读时长统计php,如何计算文章阅读时长？
weixin_30419031的博客
04-14 1715
在 Medium 上读文章，已经养成了一个习惯：看看这篇文章需要多长时间才能读完。突然好奇起来，如何估算一篇文章的阅读时长呢？想了想，一个简单的数学公式就可以了：时长 = 总字数 ÷ 平均阅读速度总字数：程序脚本直接读取。平均阅读速度：不同语言，不同认知水平，平均阅读速度可能有所差异。搜索发现，在中文环境下，成人的平均阅读速度为 500 字/分钟。可是，如果一篇文章内有视频、音频或图片，怎么办？视...
js估算一篇文章的阅读时长
weixin_34015566的博客
06-05 718
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯，偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长，我就在想这是怎么实现的，具体到前端开发中，又是如何实现的。今天在浏览SegmentFault论坛时，无意中看到了一篇关于“如何估算文章阅读时长？”的帖子，于是就从头到尾看了下实现的原理，谁知实现起来会那么简单。如下图： 知道了实现的原理，那么就来看看具体的代码是如何实现的： v...
JS实现计时器计算阅读速度
weixin_43476677的博客
03-15 591
文章目录前言一、需求与分析1.需求2.分析二、计时器的实现1.包含的功能2.代码实现3.功能效果三、实现阅读速度计算1.完整的功能逻辑代码2.页面效果总结 前言 大一的时应一个老师的要求，帮他的网站的英语文章阅读板块写一个计算阅读速度的功能。那时一开始觉得很复杂，其实老师的需求很简单，做完这个小项目后，我就开始慢慢掉入前端这个坑了。 一、需求与分析 1.需求 用户阅读时点击计时器开始计时，可暂停计时、继续计时。 用户阅读完时可点击计时器停止，另外有重置功能。 在用户点击计时停止后计算出阅读速度，并显示。
javascript计算用户打开网页的停留时间
10-26
本文介绍了javascript计算用户打开网页的停留时间，大家参考使用吧
网页计数器_更好的网页阅读时间计数器，第1部分
cungui5726的博客
08-23 298
网页计数器A reading time estimator has been at the top of every article on this site for several years. It’s primary purpose is motivation: if it’s clear that reading an article should only take two minute...
jQuery阅读时间插件Reading Time
03-24
这个插件适用于博客、新闻网站或者任何包含大量文字内容的网页，可以帮助用户了解他们需要投入多少时间才能完整阅读一篇文章，从而提高用户体验。 **核心功能** 1. **自动计算**：Reading Time 插件能够自动分析...
WProgress:阅读进度条和其他Wordpress博客的可读性增强
05-20
为了提升读者的阅读满意度，WordPress插件开发者们推出了名为"WProgress"的工具，它为每篇博客文章添加了一个阅读进度条，为用户提供了一种全新的、直观的方式来评估他们阅读文章所需的时间。这一创新功能不仅增加了...
azureStar:用JS制作的飞船大战
07-02
本篇文章将深入探讨一个用JavaScript语言实现的项目——“azureStar:飞船大战”。这个项目不仅展示了JavaScript在游戏开发中的应用潜力，也为学习Web前端技术的朋友们提供了一个生动的学习案例。 首先，我们要理解...
JavaScript中的运行时间统计方法
weixin_42657666的博客
06-30 4792
使用 Date 对象可以获得代码的执行时间，但精度较低。console.time() 和 console.timeEnd() 方法提供了毫秒级精确度，并适用于简单的计时需求。performance.now() 提供了更高精度的时间戳，并允许我们测量多个时间片段的执行时间。
如何估算文章阅读时长？
weixin_33851429的博客
06-05 742
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 677
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 247
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 524
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
RN高级interview
最新发布
流星雨的博客
07-31 318
RN高级interview
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1902
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Q shen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值