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

    一 saaskitAsp.Net Core multi-tenant application Sample using #SaaSKithttps://github.com/saaskit/saask ...

  2. ACM-ICPC 2018 徐州赛区网络预赛 F Features Track(STL模拟)

    https://nanti.jisuanke.com/t/31458 题意 有N个帧,每帧有K个动作特征,每个特征用一个向量表示(x,y).两个特征相同当且仅当他们在不同的帧中出现且向量的两个分量分别 ...

  3. [物理学与PDEs]第2章第4节 激波 4.2 熵条件

    1.  R.H. 条件仅仅给出了越过激波时的能量守恒定律, 即热力学第一定律; 但客观的流体运动过程还需满足热力学第二定律, 即越过激波是个熵增过程: $$\bex S_1>S_0\quad(0 ...

  4. on duplicate key update简单使用

    1.最近在做项目的时候,遇到这样的一个问题,就是我每做完一件事情,都要更新一下统计表,然而要更新统计表,就要根据主键去统计表里面去查询是否已经有这样的一条记录,如果有那么就更新,如果没有那么就插入一条 ...

  5. throws与throw

    throws与throw 1)throws出现在方法函数头:而throw出现在函数体:    2)throws表示出现异常的一种可能性,并不一定会发生这些异常:throw则是抛出了异常,执行throw ...

  6. Thread和Runnable的区别

    Runnable源码 Thread源码 结论 Thread实现了Runnable接口的类,使得run支持多线程. 因类的单一继承原则,推荐使用Runnable接口实现多线程

  7. golang 中string和int类型相互转换

    总结了golang中字符串和各种int类型之间的相互转换方式: string转成int: int, err := strconv.Atoi(string)string转成int64: int64, e ...

  8. C++设计模式——装饰模式

    前言 在实际开发时,你有没有碰到过这种问题:开发一个类,封装了一个对象的核心操作,而这些操作就是客户使用该类时都会去调用的操作:而有一些非核心的操作,可能会使用,也可能不会使用:现在该怎么办呢? 将这 ...

  9. lnmp.org 安装环境的,root权限都没法删除网站文件夹,问题解决-转

    rm -rf删除网站目录时出现rm: cannot remove `.user.ini': Operation not permitted rm -rf删除网站目录时出现rm: cannot remo ...

  10. 【原创】大叔问题定位分享(2)spark任务一定几率报错java.lang.NoSuchFieldError: HIVE_MOVE_FILES_THREAD_COUNT

    最近用yarn cluster方式提交spark任务时,有时会报错,报错几率是40%,报错如下: 18/03/15 21:50:36 116 ERROR ApplicationMaster91: Us ...