JS实现计时器

最新推荐文章于 2023-12-04 16:55:42 发布

HowToRemember

最新推荐文章于 2023-12-04 16:55:42 发布

阅读量422

点赞数

分类专栏：随手记

本文链接：https://blog.csdn.net/HowToRemember/article/details/118112864

版权

随手记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网上计时器一大把,闲来无事开记事本自己也码了个.一来页面干净适合魔方竞技计时🎉,二来随便温故下存JS语法🎉.

特点

计时器原则按下空格后需松手(keyUp)开始计时,按下空格触(keyDown)到立即停止计时. 销毁本次记录撤回上次最近. 彩蛋本次成绩不计入按钮🎃.

几个JS小技术点

代码技术点简单,逻辑写的有点复杂没有过多优化,适合初学者研习改造.

localStorage:浏览器本地缓存用于存历史最佳记录,下次打开仍有效.清除缓存后清空.

sessionStorage:浏览器session缓存,本次页面有效,关闭后下次进来清空.

定时器setTimeout();

效果

实现

<html>
<head>
<title>本地自制计时器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<p style="font-size:220px;text-align:center" id="showTime">0:0</p>
<p style="font-size:150px;text-align:center" id="zjcj">最佳100.0</p>
<script>
	var flag=false;//是否在计时中
	var z_mm=0;
	var t;
	var cou=0;
	var z_zj=1000;
	window.document.onkeyup = ku;
	window.document.onkeydown = kd;
	
	var isDown=false;//是否用于结束按下，结束按下时弹起不算
	function kd(){
		if(flag){
			disableRefresh();
		}
	}
	function ku(){
		if(!flag){
			disableRefresh();
		}
	}
	
	function disableRefresh(evt){
		evt = (evt) ? evt : window.event
			if (evt.keyCode) {
				if(evt.keyCode == 32 || evt.keyCode == 8){
					if(!flag){
						if(isDown){
						isDown=false;
						flag=!false;
						}else
						realTimeCl();
						
					}else{
						isDown=true;
						clearInterval(t);
						t=null;
						if(z_zj*1>z_mm*1 && evt.keyCode != 8){
							z_zj=z_mm;
							document.getElementById("zjcj").innerText="最佳"+showMM(z_mm);
						}
						z_mm=0;
					}
					flag=!flag;
				}
			}
	};
	//递归计时
	function realTimeCl() {
		t=setTimeout("realTimeCl()",100);
		z_mm++;
		document.getElementById("showTime").innerText=showMM(z_mm);
		console.log(cou++);
	}
	
	//转换显示
	function showMM(mm){
		return mm%10==0?mm/10+".0":mm/10;
	}
</script>
</body>
</html>

完!

HowToRemember

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现计时器

网上计时器一大把,闲来无事开记事本自己也码了个.一来页面干净适合魔方竞技计时????,二来随便温故下存JS语法????.特点计时器原则按下空格后需松手(keyUp)开始计时,按下空格触(keyDown)到立即停止计时. 销毁本次记录撤回上次最近. 彩蛋本次成绩不计入按钮????.几个JS小技术点代码技术点简单,逻辑写的有点复杂没有过多优化,适合初学者研习改造.localStorage:浏览器本地缓存用于存历史最佳记录,下次打开仍有效.清除缓存后清空.sessionSt
复制链接

扫一扫