前端 :用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.mzph.cn/news/126577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

04.Oracle的体系架构

Oracle的体系架构 一、主要组件 一、主要组件 下面是一张网图&#xff0c;大家可以了解一下oracle的体系架构 Oracle数据库的体系架构可以分为以下几个主要组件&#xff1a;实例&#xff08;Instance&#xff09;、数据库&#xff08;Database&#xff09;、表空间&#xff…

瑞数专题五

今日文案&#xff1a;焦虑&#xff0c;想象力过度发酵的产物。 网址&#xff1a;https://www.iyiou.com/ 专题五主要是分享瑞数6代。6代很少见&#xff0c;所以找理想哥要的&#xff0c;感谢感谢。 关于瑞数作者之前已经分享过4篇文章&#xff0c;全都收录在瑞数专栏中了&am…

21. 合并两个有序链表、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天不定期分享一些包括但不限于计算机基础、算法、后端开发相关的知识点&#xff0c;以及职场小菜鸡的生活。&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知…

正式启航!指导品牌开拓下一个增长蓝海

种草的商品总在不经意间推送到面前&#xff0c;深夜刷了会儿短视频&#xff0c;不小心又下单了一个不太熟悉的产品&#xff0c;明星达人素人全部入局直播带货&#xff0c;社交平台演变成购物场&#xff0c;无人幸免的兴趣电商时代强势来临。尤其到了每年一度的双11大促节点&…

数据库概念和sql语句

数据库概念和sql语句 数据&#xff1a;数&#xff1a;数字信息 据&#xff1a;属性 对一系列对象的具体属性的描述的集合 数据库&#xff1a;数据库就是用来组织&#xff08;各个数据之间是有关联&#xff0c;是按照规则组织起来的&#xff09;&#xff0c;存储和管理&…

音视频rtsp rtmp gb28181在浏览器上的按需拉流

按需拉流是从客户视角来看待音视频的产品功能&#xff0c;直观&#xff0c;好用&#xff0c;为啥hls flv大行其道也是这个原因&#xff0c;不过上述存在的问题是延迟没法降到实时毫秒级延迟&#xff0c;也不能随心所欲的控制。通过一段时间的努力&#xff0c;结合自己闭环技术栈…

C++新版本学习资源整理

链接资源推荐&#xff1a; C11/14/17/20 特性介绍 转 | 有点博客

Web APIs——日期对象的使用

1、日期对象 日期对象&#xff1a;用来表示时间的对象 作用&#xff1a;可以得到当前系统时间 1.1实例化 在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化 创建一个时间对象并获取时间 获得当前时间 const date new Date() <script>// 实例化 new //…

UE5 Android下载zip文件并解压缩到指定位置

一、下载是使用市场的免费插件 二、解压缩是使用市场的免费插件 三、Android路径问题 windows平台下使用该插件没有问题&#xff0c;只是在Android平台下&#xff0c;只有使用绝对路径才能进行解压缩&#xff0c;所以如何获得Android下的绝对路径&#xff1f;增加C文件获得And…

铁轨(Rails, ACM/ICPC CERC 1997, UVa 514)rust解法

有一个火车站&#xff0c;铁轨铺设如图6-1所示。有n节车厢从A方向驶入车站&#xff0c;按进站顺序编号为1&#xff5e;n。你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨并驶出车站。例如&#xff0c;出栈顺序(5 4 1 2 3)是不可能的&#xff0c;但(5 4 3 2 1)是…

python使用requests+excel进行接口自动化测试

在当今的互联网时代中&#xff0c;接口自动化测试越来越成为软件测试的重要组成部分。Python是一种简单易学&#xff0c;高效且可扩展的语言&#xff0c;自然而然地成为了开发人员的首选开发语言。而requests和xlwt这两个常用的Python标准库&#xff0c;能够帮助我们轻松地开发…

29、枚举

枚举 枚举使用场景枚举语法及特性特性&#xff1a; 手动给枚举赋值手动赋值项和未手动赋值项重复手动赋值项智能赋值数字&#xff1f;NO常数项和计算项常数枚举外部枚举 枚举使用场景 枚举类型 用于取值被限定在一定范围内的场景。 demo&#xff1a; 一周只能有七天&#xff0…

sqlLite 如何使用数据库连接池

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 一、前言 编写的一个jar包工具中&#xff…

JS(JavaScript) 实现延迟等待(sleep方法)

起因&#xff1a; 只使用 setTimeout 会产生嵌套等方面的问题&#xff0c;达不到想要的效果。 解决方法&#xff1a; 使用 async/await 还有 Promise 相结合的方式来解决问题。 直接上代码&#xff1a; function sleep(time) {return new Promise((resolve) > setTimeout…

公众号留言功能报价是多少?值得开通吗?

为什么公众号没有留言功能&#xff1f;根据要求&#xff0c;自2018年2月12日起&#xff0c;新申请的微信公众号默认无留言功能。有些人听过一个说法&#xff1a;公众号粉丝累计到一定程度或者原创文章数量累计到一定程度就可以开通留言功能。其实这个方法是2018年之前才可以&am…

三氧化二铁纳米片

&#xff08;西&#xff09;三氧化二铁纳米片 &#xff08;安&#xff09;名称&#xff1a;三氧化二铁纳米片 &#xff08;瑞&#xff09;CAS&#xff1a;1309-37-1 &#xff08;禧&#xff09;分子式&#xff1a;Fe2O3 &#xff08;生&#xff09;外观&#xff1a;白色粉末…

链表的引入

什么是链表 链表一种线性的数据结构&#xff0c;通过指针将一个个零散的内存块连接起来&#xff0c;链表的每个内存块称为结点。结构体指针在这里得到了充分的利用。 为什么要使用链表 链表可以动态的进行存储分配&#xff0c;也就是说&#xff0c;链表是一个功能极为强大的数…

518抽奖软件,是否支持作弊~内定~指定中奖人~设置范围

518抽奖软件简介 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 主打纯净&#xff0c;不可作弊 市面上&…

7. 一文快速学懂常用工具——Makefile

本章讲解知识点 引言 Makefile Makefile 入门 本专栏适合于软件开发刚入职的学生或人士&#xff0c;有一定的编程基础&#xff0c;帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化&#xff0c;尽量做到好记、言简意赅。如专栏内容有错漏&#xff0…

Flask 网站装潢, 简易更换模板

Flask 网站装潢&#xff0c;简易更换模板 本博文找个好看的网页模板&#xff0c;并简单改一改变成flask模板&#xff0c;并展示 主博客目录&#xff1a;《从零开始学习搭建量化平台笔记》 文章目录 Flask 网站装潢&#xff0c;简易更换模板下载模板Python 自动生成目录修改目录…