js估算一篇文章的阅读时长
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯,偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长,我就在想这是怎么实现的,具体到前端开发中,又是如何实现的。今天在浏览SegmentFault论坛时,无意中看到了一篇关于“如何估算文章阅读时长?”的帖子,于是就从头到尾看了下实现的原理,谁知实现起来会那么简单。如下图:

知道了实现的原理,那么就来看看具体的代码是如何实现的:
var readTime = document.querySelector(".article").innerText.length;
var readTime = readTime / 400; //计算阅读时间(一般,人的阅读速度是300-500字/分钟 ,所以就取了个400,这个值可以根据自己的实际需求来更改)
var readTime = Math.round(readTime); //四舍五入
if(readTime > 1){
console.log('预计阅读时长:' + readTime + '分钟');
}else{
console.log('预计阅读时长:1分钟');
}
我找了一篇文章测试了一下,1200字左右的文章,阅读时长大概就是3分钟。既然是预计,那么这个计算结果就不会很准确,只是个大概而已。
本文参考:https://segmentfault.com/a/1190000015175191?utm_source=index-hottest
http://tieba.baidu.com/p/3744742808
js估算一篇文章的阅读时长的更多相关文章
- Hexo添加字数统计、阅读时长
统计插件 配置 NexT 主题默认已经集成了文章[字数统计].[阅读时长]统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可.如下所示: ...
- js将一篇文章中多个连续的<br>标签替换成两个连续的<br>标签
写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签,这里就牵涉到SEO层面的问题了. 在做SEO优化的时候,其中有一个需要注意的地方就是尽量减 ...
- js 获取上传视频的时长、大小、后缀名
参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...
- 一篇文章看懂Facebook和新浪微博的智能FEED
本文来自网易云社区 作者:孙镍波 众所周知,新浪微博的首页动态流不像微信朋友圈是按照时间顺序排列的,而是按照一种所谓的"智能排序"的方式.这种违背了用户习惯的排序方式一直被用户骂, ...
- 一篇文章快速搞懂什么是GitHub
导读:什么是GitHub?Git与GitHub之间是什么关系?我们为什么需要版本控制系统?GitHub如何使用?本文将带你一探究竟. 本文字数:1710,阅读时长大约:13分钟 一.什么是版本控制 按 ...
- 一篇文章快速搞懂Qt文件读写操作
导读:Qt当中使用QFile类对文件进行读写操作,对文本文件也可以与QTextStream一起使用,这样读写操作会更加简便.QFileInfo可以用来获取文件的信息.QDir可以用于对文件夹进行操作. ...
- 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?
壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...
- 一篇文章彻底说清JS的深拷贝/浅拷贝
一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...
- js读写Cookie问题(Cookie存储时长、Cookie存储域)汇总
在采集网站用户行为数据/使用js对用户行为做交互时,经常会使用到Cookie,了解Js Cookie的读写,以及一些细节,非常重要. 什么是Cookie 所谓Cookie,只是一条极为短小的信息, ...
随机推荐
- 第六节:SignalR完结篇之依赖注入和分布式部署
一. SignalR中DI思想的应用 DI,即依赖注入,它是一种不负责创建其自己的依赖项对象的一种模式,通常用来降低代码之间的耦合性,广泛应用于架构设计,是必不可少的一种思想. 下面结合一个需求来说一 ...
- MySQL学习8 - 数据的增删改
一.介绍 二.插入数据 INSERT 三.更新数据UPDATE 四.删除数据DELETE 一.介绍 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现 ...
- 鼠标右键添加Sublime Text
鼠标右键添加Sublime Text 参考 将sublime添加到鼠标右键 实践 1. win+R 输入regedit 2. 输入路径: 计算机\HKEY_CLASSES_ROOT\*\shell\ ...
- Log日志
Log.e("tag", "错误信息"); Log.w("tag", "警告信息"); Log.i("ta ...
- L1-Day4
L1-Day4 1.这消息使她非常悲伤. [我的翻译]The message makes she very sad. [标准答案]The news made her very sad. [对比分析]( ...
- # 20175333曹雅坤《Java程序设计》第1周学习总结
教材学习内容总结 1.学习第一章PPT,安装JRE,JDK并配置path环境参数 2.在windows上使用dos命令运行教材第一章代码Hello.java和People.java 3.下载使用git ...
- OpenCV3编程入门-读书笔记3-滤波
一.领域滤波(卷积) 邻域算子值利用给定像素周围像素的值决定此像素的最终输出.如图左边图像与中间图像卷积得到右边图像.目标图像中绿色的像素由原图像中蓝色标记的像素计算得到. 通用线性邻域滤波是一种常用 ...
- chromerdriver下载地址:xpath_help
chrome下载地址 http://npm.taobao.org/mirrors/chromedriver xpath_help https://blog.csdn.net/Cayny/article ...
- 【MySql】常用方法总结
将一个字段分组,统计每组重复个数,并排序 SELECT Customer, OrderDate, count(*) as Num FROM `all_orders` GROUP BY Customer ...
- SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)
简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...