前端 :用HTML , CSS ,JS 做一个秒表

1.HTML:

html 复制代码
<body>
        <div id = "content">
            <div id = "top">
                <div id="time">00:00:000</div>
            </div>
            <div id = "bottom">
                <div id = "btn_start">开始</div>
                <div id = "btn_stop">停止</div>
                <div id = "btn_reset">重置</div>
            </div>
        </div>
    </body>

2.CSS

css 复制代码
<script src="jquery-3.6.0.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			#content{
				width: 100%;
				height: 100%;
				position: relative;
				background:url("img/1.cpp.jpg");
				background-size: 100% 100%;
			}
			#top{
				width:100%;
				height: 250px;
				position: relative;	
			}
			#time{
				font-size: 100px;
				background-color: gray;
				color: white;
				position: absolute;
				top: 50%;
				margin-top:-60px ;
				left: 50%;
				margin-left: -220px;
				border-radius: 20px;
			}
			#bottom{
				width:100%;
				height: 400px;
				position: relative;	
				top: 100px;
			}
			#btn_start{
				font-size: 50px;
				background-color: red;
				width: 20%;
				color: white;text-align: center;
				position: absolute;
				top: 20px;
				left: 40%;
				border-radius: 30px;
				}
			#btn_stop{
				font-size: 50px;
				background-color: orange;
				width: 20%;
				color: white;text-align: center;
				position: absolute;
				top: 150px;
				left: 40%;
				border-radius: 30px;
			}
			#btn_reset{
				font-size: 50px;
				background-color: greenyellow;
				width: 20%;
				color: white;text-align: center;
				position: absolute;
				top: 280px;
				left: 40%;
				border-radius: 30px;
			}
		</style>

3.JS

javascript 复制代码
<script type="text/javascript">
	var min = 0;
	var m = 0;
	var ms = 0;
	var id = 0;
	function jsq(){
		if(ms==100)
		{
			ms=0;
			if(m==60){
				min++;
				m=0;
				if(min==60){
					min=0;
					clearInterval(id);
				}
				else{
					min++;
				}
			}
			else{
				
				m++;
			}
		}
		else{
			ms++;
		}
		$("#time").html(min+":"+m+":"+ms);
	}
	$("#btn_start").click(function(){
		id = setInterval(jsq,10);
		
	});
	$("#btn_stop").click(function(){
		clearInterval(id);
	});
	$("#btn_reset").click(function(){
		location.reload();
	});
</script>

效果展示:

相关推荐
zwjapple10 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
AA-代码批发V哥2 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python