在我们玩游戏的时候，经常会听到队友说：
啊不是，放错图了，是这个：
这时候，如果你无知地回一句：“啊？CPS是啥？” 那么后果就是……
队友直接骂街：“我怎么碰到个这垃圾货？CPS是啥都不知道。一看就是0.几的小菜鸡，能赢个鬼！”
这时，你开始上网查找啥是CPS，故事就此开始……
1.CPS的定义与测试方法CPS，是Click Per Second的简写，意思是每秒点击次数测试，也可以说是我们通俗所叫的手速测试。
那么我们要怎么知道自己的CPS呢？
一般网站上会有许多免费的CPS测试，大概框架都是这样：
我们只需要在时间内不停点击“要点击的区域”，倒计时完后就可以计算出你的CPS了，CPS的计算公式如下：
时间内点击数量/时间(秒)
于是，你决定自己做一个“CPS测试网站”，来测试自己的手速进步程度：
我们之前在HTML和CSS基础网页设计和HTML和CSS进阶网页设计里讲到过html的基础知识，回顾一下之前的代码，温习一下知识吧~
我们根据已有的知识写出代码：
<html> <head> <title>我的手速测试！title> <style> *{ user-select: none; } #main{ background-color: forestgreen; width:450px; height:300px; margin-top: 150px; margin-left: 450px; } #main p{ padding-top: 100px; font-size: 30px; } img{ width: 500px; height: 400px; margin-left: 350px; }style> head> <body> <h1 align="center" >在线手速测试h1> <h2 align="center" id="clock">时间还剩10秒h2> <div align="center" id="main"> <p id="inner" align="center">开始测试p> div> body>html>浏览器中打开，效果如下：
这里解释一下user-select: none这句代码的意思，就是不让用户选中网页内的任何文字，毕竟谁也不想在测试手速时屏幕一片蓝
。
另外，新出现的选择器如下：
| 选择器 | 意义 |
| #... | id选择器，根据id选择元素 |
| a b | 包含选择器，包含在a选择器选择的元素里的b选择器选择的元素 |
| * | 通配选择器，所有元素 |
我们如果要检测点击或者倒计时的话，html就无能为力了。
这时候，我们就要利用一个新的伙伴——“JavaScript”了，它是一个弱类型的基于对象语言，弱类型代表了他可以执行下面操作：
> 1+"1""11"> 0.1+1+"0""1.10"这未免令人大跌眼镜，JavaScript的变量定义方式也与众不同：
var 变量名=变量值;它既不能直接使用变量，也不需要指定变量类型，这也是他一个与众不同的点。
Javascript的for循环、while循环、if语句的写法都是与c++相同的，没有那么奇奇怪怪。
Javascript定义函数的方式如下：
function 函数名(参数列表){ 函数体;}js的函数一般不会自己调用，一般都是做回调函数给html调用。
Javascript可以这样嵌入到html内部：
<script lang="javascript"> javascript脚本script>也可以这样外部链接：
<script lang="javascript" src="js文件路径">script>为了方便，我们本期的项目全部使用直接嵌入。
像bs4，我们也可以用javascript来获取一个节点并对这个节点进行操作：
var a=document.getElementById("abc");var b=document.getElementsByClassName("aba");...其中，document是js自带的一个对象，代指整个网页。
通过查找之后，我们就可以对元素进行操作了：
a.innerHTMLa.setAttribute()...其中，innerHTML代表返回内部的html代码，如：
我要关注 Program编程者公众号！那么a.innerHTML则为：
我要关注<a href="https://www.runoob.com/">Program编程者公众号！a>我们可以更改innerHTML：
a.innerHTML = "0"则可以把innerHTML置0，并会在网页上实时显示。
div标签有一个onmousedown属性，他可以控制当鼠标点击div时，调用哪个js函数(回调函数)。
那么我们就可以做一个点击计数的函数了：
function mouseButtonDown(){ var type = event.button; if (type==0){ document.getElementById("inner").innerHTML=Number(document.getElementById("inner").innerHTML)+1; }}其中，event是js自带的一个事件对象，event.button代表按下的是哪个键(0->左键 1->滚轮 2->右键)，Number相当于int，用处是把字符串转换为数字(整数、小数)。
我们把它设为回调函数：
<div align="center" id="main" onmousedown="onmousedown()"> <p id="inner" align="center">0p>div>测试一下：
完美！接下来要做的就是实现倒计时了。
4.实现倒计时代码如下：
function clock(){ var c = document.getElementById("clock").innerHTML.replace(/[^0-9]/ig,""); if (c!="0"){ document.getElementById("clock").innerHTML="时间还剩"+(Number(c)-1)+"秒"; }else{ var whole = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.fjmingfeng.com%2Fimg%2F3%2F9862871851%2F62%2F18a8c08ce16a1e5136fb420e93d4b303%2F2043646092%2F1623011371.jpg&refer=http%3A%2F%2Fwww.fjmingfeng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613458049&t=d0ccaf1c0d3f1c1c0e0cdff8b7e6637a"; document.getElementsByTagName("body")[0].innerHTML = "+ whole+ ">"+ ""
+ "
世界平均手速指数：6.2
世界纪录：14.1
你的平均手速指数是："+ document.getElementById("inner").innerHTML/10+ ""; }}
其中，第2行的replace是string(js中的字符串)的一个方法，作用是替换掉所有正则匹配的字符串，js中的正则如下(js中的正则可以用string表示，也可以用RegExp表示，详情参见菜鸟教程)：
/正则主体/正则模式正则模式中，i表示不区分大小写，g表示全局匹配，m表示忽略换行。
由于需要不断调用这个函数，那么我们需要用到一个新函数：
setInterval(函数,间隔时间(毫秒));相当于tkinter中的after，setInterval代表每隔多少毫秒执行这个函数，他返回一个code，我们可以用它来停止调用这个函数。
var code = setInterval(函数,间隔时间(毫秒));code = clearInterval(code);那么更改如下：
…………if (c!="0"){ document.getElementById("clock").innerHTML="时间还剩"+(Number(c)-1)+"秒";}else{ code=clearInterval(code); …………}…………函数外：var code=setInterval(clock,1000);这样效果如下：
现在基本已经可以玩起来了，快去测测你的CPS是多少吧~
5.优化体验现在，用户必须一点开网页就开始点击，非常的不银杏，于是我们可以把初始化的操作封装到start函数里，再把它设为回调函数：
var code=0;function start(){ code=setInterval(clock,1000); document.getElementById("main").setAttribute("onmousedown","mouseButtonDown()"); document.getElementById("inner").innerHTML="0";}"center" id="main" onmousedown="start()"> <p id="inner" align="center">开始测试p></div>
效果就是多了一个“开始测试”，点击后就可以开始计算CPS了，非常的银杏化
。
今天你学废了吗？
往期推荐
算法学习笔记：分治与归并排序
从零开始制作一个ip池(获取模块)
贴吧人是如何庆祝2021的？
用python平息一场文件夹的“叛乱”
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
