JS实现计时器计算阅读速度

最新推荐文章于 2023-09-07 19:56:40 发布
最新推荐文章于 2023-09-07 19:56:40 发布
阅读量830 收藏 1
点赞数
分类专栏： 实战项目 前端开发 文章标签： javascript html html5 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43476677/article/details/114810915
版权

文章目录

前言

大一的时应一个老师的要求，帮他的网站的英语文章阅读板块写一个计算阅读速度的功能。那时一开始觉得很复杂，其实老师的需求很简单，做完这个小项目后，我就开始慢慢掉入前端这个坑了。

一、需求与分析

1.需求

用户阅读时点击计时器开始计时，可暂停计时、继续计时。
用户阅读完时可点击计时器停止，另外有重置功能。
在用户点击计时停止后计算出阅读速度，并显示。
每篇文章的字数在页面上有显示。

2.分析

实现一个计时功能，用户可交互开始、暂停、继续、停止、重置。
页面上有文章的字数，可直接获取每篇文章的字数。
因此，阅读速度=字数/计时。

二、计时器的实现

1.包含的功能

开始、暂停、继续、停止、重置

2.代码实现

<!DOCTYPE html>
<html>
<head>
    <title>计时器</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
</head> 
<bady>
        <input id="start" name="s" type="button" value="开始" onclick="startclock()">
        <input name="s" type="button" value="停止" onclick="stopclock()">
        <input name="showtime" style="color:#ff0000; width:200px;" id="showtime" type="text" value="00:00:00">
        <script language="javascript">
            var se, t, m = 0, h = 0, s = 0, ss = 1, n1=0, n2=0;
            function settime(a){
                if(a<10)
                    a = "0"+a;
                return a;
            }
            function second(){
                if((ss%100)==0){s+=1;ss=1;}
                if(s>0 && (s%60)==0){m+=1;s=0;}
                if(m>0 && (m%60)==0){h+=1;m=0;}
               // t = h+"时"+m+"分"+s+"秒"+ss+"毫秒";
                var showh = settime(h);
                var showm = settime(m);
                var shows = settime(s);
                t = showh+":"+showm+":"+shows+"."+ss;
                document.getElementById("showtime").value=t;
                ss+=1;
            } 
            function startclock(){ 
                var y=1; n1+=y;
                if(n2==0){
                    if(n1%2==1)
                    {
                    se=setInterval("second()", 10);
                    document.getElementById("start").value="暂停";
                    }
                    else if(n1%2==0)
                    {
                        clearInterval(se);
                        document.getElementById("start").value="继续";
                    }
                }else if(n2>0){
                    document.getElementById("start").value="开始";
                    document.getElementById("showtime").value="00:00:00";
                    n2 = 0;//有关记录归零，避免对后续操作产生影响
                    n1 = 0;
                }
            }
            function pauseclock(){ clearInterval(se);}
            function stopclock(){ 
                var y=1; n2+=y;//获取的点击数
                clearInterval(se); ss=1;m=h=s=0;
                document.getElementById("start").value="重置";//重新改变左边按键的功能
            }
            
            </script>
</bady>
</html>

3.功能效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、实现阅读速度计算

前面的分析可以知道，计时器才是核心任务，在实现计时器的基础上，阅读速度很轻易就可以得到。

1.完整的功能逻辑代码

HTML

<html lang="en-US">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" content="target-densitydpi=device-dpi" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>Intelligence</title>
		<link rel="stylesheet" href="styles.css" />
		<script src="timer2.js"></script>
		
	</head>
	<body class="zp">
					<div class="hintBar">
						<p style="text-indent: 0px">
							<span id="Start" style="display: inline-block; width: 80px; margin-left: 1em; cursor: hand" name="s" onclick="startclock()">Start</span>
							<span name="s"  style="display: inline-block; width: 40px; cursor: hand" onclick="stopclock()">Stop</span>
							<span name="showtime" style="display: inline-block; width: 80px; float: right; margin-right: 1em" id="showtime" type="text" >00:00:00</span>
						</p>
					</div>

		<table border="0" height="100%" width="100%">
			<tr>
				<td height="100%" width="100%">
					<div class="avDiv">
						<iframe style="width: 100%; height: 100%" frameBorder="0" src="4_541.html"></iframe>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<p class="wordCount" >Word Count: <span id="wordCount">220</span></p>
				</td>
			</tr>
			<tr>
				<td>
					<div class="myBoxShadow">
						<p class="z" style="margin-left: 1em">Your Speed: <span id="speed" style=""></span></p>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

JS

	var se, t, m = 0, h = 0, s = 0, ss = 1, n1 = 0, n2 = 0;
	var FixedSpeed;//定义一个固定速度用来记录速度
	function settime(a){
		if(a<10)
			a = "0"+a;
		return a;
	}
	function second(){					//计时函数
			if((ss%100)==0){s+=1;ss=1;}
			if(s>0 && (s%60)==0){m+=1;s=0;}
			if(m>0 && (m%60)==0){h+=1;m=0;}
		// t = h+"时"+m+"分"+s+"秒"+ss+"毫秒";
		    var showh = settime(h);
            var showm = settime(m);
            var shows = settime(s);
			t = showh+":"+showm+":"+shows;
			document.getElementById("showtime").innerHTML=t;
			ss+=1;
	} 
	function startclock(){ 
			var x=1; n1+=x;//让n1获取左边按键的点击数
			if(n2==0)
			{
				if(n1%2==1)//单数计时
				{
					se=setInterval("second()", 10);//每10毫秒调用一次second（）函数
			        document.getElementById("Start").innerHTML="Pause";
				}
				else if(n1%2==0)//双数暂停
				{
					clearInterval(se);
				    document.getElementById("Start").innerHTML="Continue";
				}
			}
			else if(n2>0)//当Stop键被点击或者连续点击时，Reset功能成立
			{
				document.getElementById("Start").innerHTML="Start";
				document.getElementById("showtime").innerHTML="00:00:00";
				document.getElementById("speed").innerHTML="";
				n2 = 0;//有关记录归零，避免对后续操作产生影响
				n1 = 0;
			}
			
	}
	//function pauseclock(){ clearInterval(se);}
	function stopclock(){	 //结束和计算速度的函数
		var y=1; n2+=y;//让n2获取右边按键的点击数
		clearInterval(se); 
		if(n2==1)//输出速度
		{
			if(h==0 && m==0 && s==0 && ss==1)//特殊情况，没有计时就直接点击Stop键（ss是从1开始的，不是0）
			{
				var speed=0;
				FixedSpeed = speed;//记录速度 
				alert("错误操作，没有计时，请按“Reset”键重新开始");
			}
			else//正常情况
			{
				var wordCount = document.getElementById("wordCount").innerHTML;
				var speed = Math.round(wordCount/(h*60+m+s/60+ss/6000));
			    FixedSpeed = speed;//记录速度
			}
			document.getElementById("speed").innerHTML=speed + "&#160;WPM";//WPM是每分钟多少个单词
		}
		else if(n2>1)//避免当Stop键被重复点击时，输出一个非正常值,所以直接输出一个旧值
		{
			if(FixedSpeed==0) {alert("错误操作，没有计时，请按“Reset”键重新开始");}
			document.getElementById("speed").innerHTML=FixedSpeed + "&#160;WPM";
	    }
		ss=1;m=h=s=0;     //时间归零
		document.getElementById("Start").innerHTML="Reset";//重新改变左边按键的功能
			
	}

2.页面效果

在这里插入图片描述

总结

这算是大学第一个写出来有真正去应用的程序，快两年了，现在看起来那时的要求真简单，代码写的也很业余。不过我也不想去修改它的模样，毕竟那是最初的样子。

Kai-Yang
关注
专栏目录
使用 JavaScript 计算一篇文章的预计阅读时间
我的博客，不一样的自我表达
05-24 319
您可能已经在Medium等网站上看到过显示的估计阅读时间。在本教程中，我们将使用 JavaScript 来计算一篇文章的预计阅读时间。本教程到此结束，您现在知道如何显示可以轻松放入博客或新闻网站的文章的预计阅读时间。如果您喜欢这篇文章，我还有许多其他适用于初学者的实用 Javascript 教程，因此请务必查看它们！words– 通过在每个空格处拆分来计算单词总数（长度）。time– 计算读取时间四舍五入到最接近的整数。text– 获取文章文本，以便我们进行计算。计算出时间后，我们将数字输出到。
js估算一篇文章的阅读时长
weixin_34015566的博客
06-05 766
每天早上上班在地铁里我都有看技术类文章以及实时新闻的习惯，偶尔会看到有些文章的开始部分会提醒我们这篇文章大概的阅读时长，我就在想这是怎么实现的，具体到前端开发中，又是如何实现的。今天在浏览SegmentFault论坛时，无意中看到了一篇关于“如何估算文章阅读时长？”的帖子，于是就从头到尾看了下实现的原理，谁知实现起来会那么简单。如下图： 知道了实现的原理，那么就来看看具体的代码是如何实现的： v...
实现阅读倒计时功能
duanyuehuan
03-17 647
倒计时
网页计数器_更好的网页阅读时间计数器，第1部分
cungui5726的博客
08-23 324
网页计数器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...
js-reading-time:获取文本阅读时间和其他文本实用程序
05-24
js的阅读时间 获取文本阅读时间和其他文本实用程序。
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
10-20
总的来说，通过JavaScript实现的倒数计时器是一种实用的网页功能，能够帮助用户更好地感知时间的流逝，同时也能增加网页的互动性。学习和理解这些代码有助于提升JavaScript编程技能，特别是在时间和日期处理方面。
理想Web倒计时器的设计与实现
06-04
然而，传统的JavaScript实现的倒计时器存在诸多局限性，比如无法防止页面刷新或关闭后重新计时、计时不够精确等问题。本文旨在探讨一种结合动态脚本（如ASP、PHP、JSP）与JavaScript技术的新型倒计时器设计方案，该...
JavaScript计时器制作进度条
qq_60012576的博客
06-14 761
JavaScript计时器函数制作进度条
理想Web倒计时器的设计与实现.doc
06-27
在设计和实现一个理想的Web倒计时器时，我们需要解决一些常见的问题，这些问题通常出现在仅使用JavaScript实现的倒计时器中。JavaScript的定时器功能，如`setInterval()`，虽然方便，但存在一些限制。当用户刷新页面...
测试您每分钟阅读速度的方法
iCloudEnd的博客
03-20 2227
我的每分钟320另外测试故事 每分钟232算算自己读了几行，再乘以每行平均单词数（第一段总单词除以第一段行数），得到自己刚才3分钟的总阅读单词数；再除以3分钟，得到大约每分钟的阅读单词量。 ...
javascript计算用户打开网页的停留时间
10-26
本文介绍了javascript计算用户打开网页的停留时间，大家参考使用吧
JS三目运算符处理时间，预计时间功能
AA115668772的博客
12-19 233
JS预计时间功能
前端笔记 —— 计时器
紫de飒殇的博客
12-27 1045
计时器实现
JS中代码执行速度测试
肥晨开发的学习之路
11-30 497
console.time("timer");for (let index = 0; index < 100; index++) { } console.timeEnd("timer");//timer: 0.007080078125ms
JavaScript中的运行时间统计方法
weixin_42657666的博客
06-30 5732
使用 Date 对象可以获得代码的执行时间，但精度较低。console.time() 和 console.timeEnd() 方法提供了毫秒级精确度，并适用于简单的计时需求。performance.now() 提供了更高精度的时间戳，并允许我们测量多个时间片段的执行时间。
vue项目浏览量，停留时长统计——利用定时器
最新发布
m0_59951344的博客
09-07 1273
停留时长
5.定时器-间歇函数
m0_74891783的博客
07-28 296
javascript 定时器-间歇函数
如何使用JavaScript，纯前端实现字符、字数统计？
Mintimate的CSDN博客
05-08 2685
快速目录统计字数/字符在线演示????实现逻辑????判断规则⚖️正则表达式Unicode编码代码实现✌️统计中文统计英文和数字总结???? 统计字数/字符 平时，在写一些报告时，需要统计字数；亦或者，我们在填写一些信息，有字数要求。这个时候，大部分人会打开Word，进行字数统计。这样效率过低，且无法模块化移植。（而且macOS启动Microsoft Word挺慢的????……） 本次给大家介绍，如何使用JavaScrip前端统计输入内容所包含的字符和字数。稍微美化一下，放到服务器里，以后统计文字字数就不用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值