前端 :用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 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel2 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip2 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio2 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
赵得C2 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG2 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904273 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa3 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事3 小时前
React Hooks useContext
前端·javascript·react.js