每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯,偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长,我就在想这是怎么实现的,具体到前端开发中,又是如何实现的。今天在浏览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估算一篇文章的阅读时长的更多相关文章

  1. Hexo添加字数统计、阅读时长

    统计插件 配置 NexT 主题默认已经集成了文章[字数统计].[阅读时长]统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可.如下所示: ...

  2. js将一篇文章中多个连续的<br>标签替换成两个连续的<br>标签

    写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签,这里就牵涉到SEO层面的问题了. 在做SEO优化的时候,其中有一个需要注意的地方就是尽量减 ...

  3. js 获取上传视频的时长、大小、后缀名

    参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...

  4. 一篇文章看懂Facebook和新浪微博的智能FEED

    本文来自网易云社区 作者:孙镍波 众所周知,新浪微博的首页动态流不像微信朋友圈是按照时间顺序排列的,而是按照一种所谓的"智能排序"的方式.这种违背了用户习惯的排序方式一直被用户骂, ...

  5. 一篇文章快速搞懂什么是GitHub

    导读:什么是GitHub?Git与GitHub之间是什么关系?我们为什么需要版本控制系统?GitHub如何使用?本文将带你一探究竟. 本文字数:1710,阅读时长大约:13分钟 一.什么是版本控制 按 ...

  6. 一篇文章快速搞懂Qt文件读写操作

    导读:Qt当中使用QFile类对文件进行读写操作,对文本文件也可以与QTextStream一起使用,这样读写操作会更加简便.QFileInfo可以用来获取文件的信息.QDir可以用于对文件夹进行操作. ...

  7. 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?

     壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...

  8. 一篇文章彻底说清JS的深拷贝/浅拷贝

    一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...

  9. js读写Cookie问题(Cookie存储时长、Cookie存储域)汇总

    在采集网站用户行为数据/使用js对用户行为做交互时,经常会使用到Cookie,了解Js Cookie的读写,以及一些细节,非常重要.   什么是Cookie 所谓Cookie,只是一条极为短小的信息, ...

随机推荐

  1. python django(forms组件)

    forms组件最大的作用,就是做数据校验. 普通做法,一个一个写校验规则,没有解耦.校验规则,都在视图函数里面. 网页校验 修改urls.py,增加路径addbook from app01 impor ...

  2. Hadoop记录- Yarn Job MAX

    #!/bin/sh #yarn job status:NEW.NEW_SAVING.SUBMITTED.ACCEPTED.RUNNING.FINISHED.FAILED.KILLED nnum=$(/ ...

  3. IE提示“Internet Explorer已限制此网页运行脚本或ActiveX控件”的解决办法

    在页面html开始标签和head开始标签中间新增一行,添加以下代码: <!-- saved from url=(0014)about:internet --> 或者 直接设置IE浏览器 工 ...

  4. Ubuntu18.04问题记录

    1. pip install 包时偶然间碰上了如下问题: Could not install packages due to an EnvironmentError: [Errno 13] 权限不够: ...

  5. react中input自动聚焦问题

    input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...

  6. 关于Setup Factory 9的一些使用方法

    之前使用的VS自带的InstallShield2015LimitedEdition 打包工具,但是不太灵活,打包长得也难看:后来使用Setup Factory 9 打包winform应用程序,用起来轻 ...

  7. jetty启动设置端口

    nohup java -jar start.jar jetty.port=10010 命令不能在后台运行,ctrl+c程序就自动停止了,可以在命令后面加个&符号,就可以了 nohup java ...

  8. 激活函数——sigmoid函数(理解)

    0 - 定义 $Sigmoid$函数是一个在生物学中常见的S型函数,也称为$S$型生长曲线.在信息科学中,由于其单增以及反函数单增等性质,$Sigmoid$函数常被用作神经网络的阈值函数,将变量映射到 ...

  9. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  10. 使用fiddler修改支付金额,支付必测

    使用fiddler4先把网页拦截,修改服务器返回的参数,并把修改后的数据包发送给服务器,若该页面价格修改成功则是一个重大bug. 以下是操作流程: 一.拦截订单请求 方法一: 1.在下方命令行输入命令 ...