前端 :用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>

效果展示:

相关推荐
酷酷的阿云1 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205873 分钟前
web端手机录音
前端
齐 飞9 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹26 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js