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

效果展示:

相关推荐
ggdpzhk几秒前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript