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

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

news 2026/3/31 1:12:54

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>

效果展示：

相关文章：

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

1.HTML&#xff1a; <body><div id "content"><div id "top"><div id"time">00:00:000</div></div><div id "bottom"><div id "btn_start">开始</div><div …...

编程日记 2023/10/31 2:14:21

BIOS MBR UEFI GPT详解

先来看下名词 启动方式&#xff1a; BIOS&#xff1a;Basic Input Output System&#xff0c;中文名称"基本输入输出系统"。 UEFI&#xff1a;Unified Extensible Firmware Interface&#xff0c;中文名称"统一的可扩展固件接口"。 Legacy&#xff1a;…...

编程日记 2023/10/31 2:13:19

2023NOIP A层联测20-点餐

一家新的餐馆开业了&#xff0c;为了吸引更多的顾客&#xff0c;每样餐品都有打折的活动。特别的&#xff0c;餐馆内一共有&#x1d45b;样菜品&#xff0c;编号从 1 1 1 到 n n n&#xff0c;每样菜品每人最多只能点一次。对于第 i i i 种菜品&#xff0c;其包含两种价格&a…...

编程日记 2023/10/31 2:09:11

3D LUT 滤镜 shader 源码分析

最近在做滤镜相关的渲染学习&#xff0c;目前大部分 LUT 滤镜代码实现都是参考由 GPUImage 提供的 LookupFilter 的逻辑&#xff0c;整个代码实现不多。参考网上的博文也有各种解释&#xff0c;参考了大量博文之后终于理解了&#xff0c;所以自己重新整理了一份&#xff0c;方便…...

编程日记 2023/10/31 2:08:10

五分钟理解Java跨平台原理（适合小白）

JVM通俗的理解 Java语言的一个非常重要的特点就是与平台的无关性。而使用Java虚拟机&#xff0c;即JVM&#xff08;Java Virtual Machine&#xff09;是实现这一特点的关键。JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机…...

编程日记 2023/10/31 2:07:07

从初级测试工程师到测试专家，你的晋升路线是什么？

最近&#xff0c;我们讨论了软件测试工程的的分级&#xff0c;大家都贡献了自己的想法。 对于大家来说&#xff0c;软件测试人的分级其实也代表了我们的进阶方向&#xff0c;职业发展。总体来说&#xff0c;测试工程师未来发展有三个方向&#xff1a; 技术精英 行业专家 管理…...

编程日记 2023/10/31 2:06:06

合肥中科深谷嵌入式项目实战——人工智能与机械臂（四）

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 作者&#xff1a;爱吃饼干的小白鼠。Python领域优质创作者&#xff0c;2022年度博客新星top100入围&#xff0c;荣获多家平台专家称号。…...

编程日记 2023/10/31 2:03:03

Zynq-Linux移植学习笔记之64- 国产ZYNQ在linux下配置国产5396芯片

1、背景介绍 复旦微ZYNQ通过SPI配置国产JEM5396&#xff0c;框图如下&#xff1a; 现在需要在linux下的应用程序内配置JEM5396的寄存器。其中FMQL和进口的XILINX ZYNQ类似&#xff0c;JEM5396和进口的BCM5396兼容。因此可以参考进口ZYNQ在linux下配置BCM5396过程。Zynq-Linux移…...

编程日记 2023/10/31 2:02:02

系统架构设计师-第19章-大数据架构设计理论与实践-软考学习笔记

传统数据处理系统存在的问题 传统数据处理系统存在以下问题&#xff1a; 1. 数据孤岛问题&#xff1a;不同部门或系统之间的数据隔离&#xff0c;数据无法共享和整合。 2. 数据不一致性问题&#xff1a;由于数据维护分散&#xff0c;同一数据在不同系统或部门中可能存在不同…...

编程日记 2023/10/31 2:00:00

论坛搭建.

目录 一.配置软件仓库 二.安装http php miriadb 三.配置数据库 四.源码拖拽并解压 五.防火墙通过 六.浏览器安装测试 七.界面参数设置 一.配置软件仓库 1.进入仓库目录 cd /etc/yum.repos.d 2.创建仓库文件 vim local.repo 3.在 local.repo中写入:(粘贴的时候注意位…...

编程日记 2023/10/31 1:58:59

三种前端埋点方式

什么是埋点 埋点是数据采集领域&#xff08;尤其是用户行为数据采集领域&#xff09;的术语&#xff0c;指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。 我们可以知道埋点实际上是对特定事件或…...

编程日记 2023/10/31 1:57:58

html获取网络数据，列表展示 第二种

html获取网络数据&#xff0c;列表展示 第二种 js遍历json数组中的json对象 image.png || - 判断数据是否为空&#xff0c;为空就显示 - <!DOCTYPE html> <html><head><meta charset"utf-8"><title>网页列表</title><script …...

编程日记 2023/10/31 1:56:57

【Python 算法】信号处理通过陷波滤波器准确去除工频干扰

对于一个信号来说通常汇入工频噪声往往是因为交流电产生的电泳&#xff0c;影响了我们信号采集导致信号上存在工频干扰。 那么matlab去除工频干扰可以通过陷波滤波器实现。 通常使用scipy.signal实现信号的处理。 Scipy的信号处理模块&#xff08;scipy.signal&#xff09;来创…...

编程日记 2023/10/31 1:55:56

Redis（08）| 线程模型

一、redis 的线程模型 redis 内部使用文件事件处理器 file event handler&#xff0c;它是单线程的&#xff0c;所以redis才叫做单线程模型。它采用IO多路复用机制同时监听多个 socket&#xff0c;将产生事件的 socket 压入内存队列中&#xff0c;事件分派器根据 socket 上的事…...

编程日记 2023/10/31 1:53:54

Java14-16新特性

目录 一、Java14新特性 1、instanceof模式匹配 2、友好的空指针(NullPointerException)提示 3、record类型 二、Java15新特性 1、Sealed Classes 2、CharSequence新增方法 3、TreeMap新增方法 4、文本块 5、无需配置环境变量 三、Java16新特性 1、包装类构造方法的…...

编程日记 2023/10/31 1:52:51

中兴再推爆款，双2.5G网口的巡天AX3000Pro+仅需299元

10月30日消息,中兴新款路由器中兴巡天AX3000Pro将于10月31日20:00正式开售,当前可在天猫、京东及红魔商城进行预约,首发价格299元。 据了解,中兴巡天AX3000Pro是中兴智慧家庭推出的巡天系列新品,也是当前市场上唯一一款300元价位内配备双2.5G网口的路由器。 中兴巡天AX3000Pro…...

编程日记 2023/10/31 1:51:50

【系统架构】架构风格专题

目录 1、定义 2、通用架构风格分类 3、架构风格比较 4、示例&#xff1a;管道-过滤 VS 数据仓库&#xff09;比较因素分析 1、定义 架构风格&#xff1a;描述某一特定应用领域中系统组织方式的惯用模式&#xff0c;反映了领域中众多系统所共有的结构和语义特性&#xff0c…...

编程日记 2023/10/31 1:49:47

【Qt】盒子布局、网格布局、表单布局和堆栈布局

盒子布局 QBoxLayout可以在水平方向或垂直方向上排列控件&#xff0c;分别派生了QHBoxLayout、QVBoxLayout子类。 QHBoxLayout&#xff1a;水平布局&#xff0c;在水平方向上排列控件&#xff0c;即&#xff1a;左右排列。QVBoxLayout&#xff1a;垂直布局&#xff0c;在垂直…...

编程日记 2023/10/31 1:48:47

GO语言，半自动打怪

仅供学习参考&#xff0c;切勿用于商业用途 package mainimport ("fmt""github.com/go-vgo/robotgo""math/rand""time" )const (taskNum 7 )type Task struct {Name stringSleepTime1 intSleepTime2 intFunc func() }fu…...

编程日记 2023/10/31 1:47:46

【Java 进阶篇】Java登录案例详解

登录是Web应用程序中常见的功能&#xff0c;它允许用户提供凭证&#xff08;通常是用户名和密码&#xff09;以验证其身份。本文将详细介绍如何使用Java创建一个简单的登录功能&#xff0c;并解释登录的工作原理。我们将覆盖以下内容&#xff1a; 登录的基本概念创建一个简单的…...

编程日记 2023/10/31 1:46:45

设备维护日历可视化：用低代码平台打造智能保养提醒看板（含模板下载）

设备维护日历可视化&#xff1a;用低代码平台打造智能保养提醒看板 在制造业的日常运营中&#xff0c;设备维护保养常常被视为"必要但繁琐"的后台工作。传统的手工记录或Excel表格管理方式&#xff0c;不仅效率低下&#xff0c;还容易因人为疏忽导致关键保养任务被遗…...

编程新知 2026/3/30 23:06:17

Bypass Paywalls Clean 3大突破策略：2024浏览器扩展技术指南

Bypass Paywalls Clean 3大突破策略&#xff1a;2024浏览器扩展技术指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 当你在撰写行业分析报告时&#xff0c;是否曾因关键数据被付费…...

编程新知 2026/3/30 23:06:17

原创：黄大年茶思屋难题揭榜第11期｜5道核心题精简公开·被退稿求技术指正

黄大年茶思屋难题揭榜第11期&#xff5c;5道核心题精简公开被退稿求技术指正 作者&#xff1a;华夏之光永存 摘要 这五道题我们已完整解题并提交黄大年茶思屋难题揭榜&#xff0c;最终被直接退稿&#xff0c;但平台未给出任何具体技术驳回理由、未指明缺陷、未提供修改方向。我…...

编程新知 2026/3/30 23:02:16

10个企业级Windows自动化场景：pywinauto终极应用指南

10个企业级Windows自动化场景&#xff1a;pywinauto终极应用指南 【免费下载链接】pywinauto pywinauto/pywinauto: 一个 Python 库&#xff0c;用于自动化 Windows 应用程序。特点是提供了丰富的函数和类库&#xff0c;可以用于控制鼠标、键盘和菜单等元素&#xff0c;实现自动…...

编程新知 2026/3/30 22:46:02

springboot+vue基于web的线上文印店 校园打印店平台设计与实现

目录功能模块分析关键技术实现扩展功能建议数据模型示例&#xff08;简化的核心表&#xff09;部署架构项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作功能模块分析 后端&#xff08;SpringBoot&#xff09;功能模块 用户管理…...

编程新知 2026/3/30 21:22:59

OpenClaw局域网访问配置

根据OpenClaw最新官方文档&#xff08;截至2026年3月&#xff09;&#xff0c;以下是更新后的局域网访问配置指南&#xff0c;整合了网络架构、安全加固和自动化配对等新特性&#xff1a;一、核心配置命令&#xff08;基于新版网关协议&#xff09;启用LAN多接口监听 使用新参数…...

编程新知 2026/3/30 20:34:39

手把手教你用STM32F103C8T6和ESP8266搭建智能温室大棚（附完整源码和PCB）

从零构建基于STM32与ESP8266的智能温室系统实战指南 1. 项目概述与核心设计思路 想象一下&#xff0c;在自家后院搭建一个能自动调节温湿度、精准灌溉的迷你温室&#xff0c;而成本不到一顿火锅的钱。这就是我们今天要实现的STM32F103C8T6ESP8266智能温室系统的魅力所在。不同于…...

编程新知 2026/3/30 20:00:23

提升大语言模型对话体验：text-generation-webui全流程优化指南

提升大语言模型对话体验&#xff1a;text-generation-webui全流程优化指南 【免费下载链接】text-generation-webui A Gradio web UI for Large Language Models. Supports transformers, GPTQ, AWQ, EXL2, llama.cpp (GGUF), Llama models. 项目地址: https://gitcode.com/G…...

编程新知 2026/3/30 19:58:22

如何让AI帮你读完100篇文献，并写出综述的核心内容？

对于每一位科研工作者而言&#xff0c;面对一个新的课题或研究方向&#xff0c;最让人望而生畏的往往不是实验本身&#xff0c;而是前期那如山般堆积的文献调研。当你需要在短时间内读完100篇甚至更多核心文献&#xff0c;并从中提炼出逻辑严密、观点独到的综述核心内容时&…...

编程新知 2026/3/30 19:52:15

Qwen3-TTS开源模型快速上手：5分钟完成中文普通话+粤语+英文三语语音合成

Qwen3-TTS开源模型快速上手&#xff1a;5分钟完成中文普通话粤语英文三语语音合成 想不想让你的应用开口说话&#xff1f;不是那种机械的电子音&#xff0c;而是像真人一样&#xff0c;有感情、有语调&#xff0c;甚至能说方言的语音&#xff1f;今天要聊的Qwen3-TTS&#xff…...

编程新知 2026/3/30 19:09:08