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

效果展示:

相关推荐
读心悦10 分钟前
CSS 溢出内容处理、可见性控制与盒类型设置深度解析
前端·css
Minyy1118 分钟前
Vue3指令(二)--v-text、v-html数据渲染,计算属性
前端·javascript·vue.js·前端框架·vue·html
个人开发-胡涂涂21 分钟前
ECMAScript标准:JavaScript的核心
前端·javascript·ecmascript
GISer_Jing26 分钟前
React底层架构深度解析:从虚拟DOM到Fiber的演进之路
前端·react.js·架构
斯密码赛我是美女34 分钟前
ssti刷刷刷
java·服务器·前端
Mryan20051 小时前
Angular | 利用 `ChangeDetectorRef` 解决 Angular 动态显示输入框的聚焦问题
前端·javascript·angular.js
郭尘帅6661 小时前
Vue3中实现轮播图
开发语言·前端·javascript
众乐乐_20081 小时前
Java 后端给前端传Long值,精度丢失的问题与解决
java·前端·状态模式
一叶茶1 小时前
VsCode和AI的前端使用体验:分别使用了Copilot、通义灵码、iflyCode和Trae
前端·vscode·gpt·ai·chatgpt·copilot·deepseek
熊猫钓鱼>_>2 小时前
基于MCP的桥梁设计规范智能解析与校审系统构建实践
前端·easyui·设计规范