用原生JS实现一个简单的计时器demo

最新推荐文章于 2025-07-04 11:03:21 发布

viana37

最新推荐文章于 2025-07-04 11:03:21 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 计时器

本文链接：https://blog.youkuaiyun.com/viana37/article/details/50725227

前端专栏收录该内容

17 篇文章

订阅专栏

本文记录了作者初次实习时用原生JavaScript实现计时器功能的经历，过程中遇到并改正了如jQuery选择器与原生DOM操作的混淆等错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天实习第一次写代码，很简单，实现一个计时效果，但是我还是折腾了很久。。。

为自己的智商感到惶恐。各种白痴错误啊

下面是代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="content-Type" content="text/html; charset=utf-8 "/>
	<script type="text/javascript">
		
		function settime(a){
			if(a<10)
				a = "0"+a;
			return a;
		}
			 h = 0;
			 m = 0;
			 s = 0;

		function starttime(){
        	var showh = settime(h);
        	var showm = settime(m);
        	var shows = settime(s);
        	document.getElementById("showtime").innerHTML=showh+":"+showm+":"+shows;

       		s++;
        	if(s == 60)
       		{
        		s = 0;
        		m++;
       		 }
        	if(m == 60){
        		m = 0;
        		h++;
        	}

        	t = setTimeout("starttime()",1000);
		}

		function endtime() {
			clearTimeout(t);
		}
	</script>
</head>
<body>
<div id="showtime"></div>
<form>
	<input type="button" value="开始" id = "start" onclick="starttime()"/>
	<input type="button" value="停止" id = "end" onclick="endtime()"/>
</form>
</body>
</html>

所犯错误：

1. jquery忘记了

2. jquery的元素选择器返回的跟原生DOM操作返回的不是一个东西。前者返回封装好的jquery对象