当前位置: 首页 > news >正文

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

1.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

<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

<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>

效果展示:

http://www.lryc.cn/news/212072.html

相关文章:

  • BIOS MBR UEFI GPT详解
  • 2023NOIP A层联测20-点餐
  • 3D LUT 滤镜 shader 源码分析
  • 五分钟理解Java跨平台原理(适合小白)
  • 从初级测试工程师到测试专家,你的晋升路线是什么?
  • 合肥中科深谷嵌入式项目实战——人工智能与机械臂(四)
  • Zynq-Linux移植学习笔记之64- 国产ZYNQ在linux下配置国产5396芯片
  • 系统架构设计师-第19章-大数据架构设计理论与实践-软考学习笔记
  • 论坛搭建.
  • 三种前端埋点方式
  • html获取网络数据,列表展示 第二种
  • 【Python 算法】信号处理通过陷波滤波器准确去除工频干扰
  • Redis(08)| 线程模型
  • Java14-16新特性
  • 中兴再推爆款,双2.5G网口的巡天AX3000Pro+仅需299元
  • 【系统架构】架构风格专题
  • 【Qt】盒子布局、网格布局、表单布局和堆栈布局
  • GO语言,半自动打怪
  • 【Java 进阶篇】Java登录案例详解
  • Vue 菜单导航栏,轮播图
  • 讲述为什么要学习Adobe XD以及 Adobe XD下载安装
  • Netty复习:(1)Http server: hello world
  • 【Python 千题 —— 基础篇】加法计算
  • 基于纵横交叉算法的无人机航迹规划-附代码
  • D-Bus:数据类型
  • BI零售数据分析,告别拖延症,及时掌握一线信息
  • [BUUCTF NewStarCTF 2023 公开赛道] week4 crypto/pwn
  • 论文范文:论基于架构的软件设计方法及应用
  • C语言 指针进阶笔记
  • 数据库认证 | Oracle OCP好考吗