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

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

news 2026/3/29 6:00:28

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： <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详解

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

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

2023NOIP A层联测20-点餐

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

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

3D LUT 滤镜 shader 源码分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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

三种前端埋点方式

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

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

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

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

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

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

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

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

Redis（08）| 线程模型

一、redis 的线程模型 redis 内部使用文件事件处理器 file event handler，它是单线程的，所以redis才叫做单线程模型。它采用IO多路复用机制同时监听多个 socket，将产生事件的 socket 压入内存队列中，事件分派器根据 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、示例：管道-过滤 VS 数据仓库）比较因素分析 1、定义架构风格：描述某一特定应用领域中系统组织方式的惯用模式，反映了领域中众多系统所共有的结构和语义特性&#xff0c…...

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

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

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

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

GO语言，半自动打怪

仅供学习参考，切勿用于商业用途 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应用程序中常见的功能，它允许用户提供凭证（通常是用户名和密码）以验证其身份。本文将详细介绍如何使用Java创建一个简单的登录功能，并解释登录的工作原理。我们将覆盖以下内容： 登录的基本概念创建一个简单的…...

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

OpenClaw低代码方案：Qwen3-32B将Excel需求转为自动化流程

OpenClaw低代码方案：Qwen3-32B将Excel需求转为自动化流程 1. 从Excel到ERP的自动化困境上周市场部的同事又来找我帮忙了。他们每天要手动将几十份Excel表格里的客户订单录入到公司老旧的ERP系统里——这个上世纪风格的绿色界面软件，既没有批量导入功能…...

编程新知 2026/3/29 4:47:24

高维问题如何“降维计算”：矩阵映射、卷积与拆分汇总

你在课程里提到一个很重要的工程化思想： 高维问题看起来复杂，但很多计算可以通过“拆分再计算”的方式降维处理这篇把它整理成一条可复述的主线，重点放在： 为什么能拆拆完怎么汇总和矩阵/卷积的关系是什么先说明一个常见误解&am…...

编程新知 2026/3/29 3:40:46

DanKoe 视频笔记：通用时代崛起：如何通过多种兴趣茁壮成长

在本教程中，我们将探讨为何在当今的“创作者经济”中，拥有广泛兴趣和技能的“通才”比只精通一门的“专家”更具优势。我们将分析背后的原因，并提供一套实用的步骤，帮助你作为一名通才，在数字世界中建立个人品牌、吸引…...

编程新知 2026/3/29 3:08:31

绕过RK3588的RGA坑：手把手教你修改YOLOv8分割模型部署代码，用CPU预处理替代硬件加速

RK3588部署YOLOv8分割模型的稳定化实践：从RGA报错到CPU预处理方案优化当你在RK3588开发板上部署YOLOv8分割模型时，是否遇到过这样的场景：模型转换和交叉编译一切顺利，却在运行时突然弹出"Failed to call RockChipRga interf…...

编程新知 2026/3/29 2:56:18

WechatDecrypt终极指南：3步轻松解密微信数据库的完整方案

WechatDecrypt终极指南：3步轻松解密微信数据库的完整方案【免费下载链接】WechatDecrypt 微信消息解密工具项目地址: https://gitcode.com/gh_mirrors/we/WechatDecrypt 想要找回珍贵的聊天记录却苦于微信加密机制？WechatDecrypt作为一款专业的…...

编程新知 2026/3/29 2:34:10

League Toolkit：重新定义英雄联盟游戏体验的智能辅助工具集

League Toolkit：重新定义英雄联盟游戏体验的智能辅助工具集【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的…...

编程新知 2026/3/29 1:59:46

2023款惠普战66六代笔记本Win11重装教程：从U盘制作到跳过联网

2023款惠普战66六代笔记本Win11重装全流程指南最近帮朋友折腾一台新入手的惠普战66六代笔记本，发现这款商务本在重装系统时有些细节需要特别注意。尤其是Win11的强制联网激活机制和BitLocker加密的坑，稍不注意就会让整个重装过程卡壳。下面把我实测可用…...

编程新知 2026/3/29 1:43:34

ADXL362嵌入式驱动开发：SPI通信、寄存器配置与低功耗唤醒

1. ADXL362嵌入式驱动库深度解析与工程实践指南 ADXL362是Analog Devices（ADI）推出的超低功耗、三轴数字MEMS加速度计，专为电池供电的物联网终端、可穿戴设备、工业状态监测和远程传感器节点设计。其核心优势在于：在仅270 nA待机…...

编程新知 2026/3/29 1:41:29

FlexASIO音频优化实战指南：从延迟卡顿到高保真体验的转型方案

FlexASIO音频优化实战指南：从延迟卡顿到高保真体验的转型方案【免费下载链接】FlexASIO A flexible universal ASIO driver that uses the PortAudio sound I/O library. Supports WASAPI (shared and exclusive), KS, DirectSound and MME. 项目地址: https://g…...

编程新知 2026/3/28 23:57:00

PEV2核心源码解析：深入理解执行计划解析与渲染机制

PEV2核心源码解析：深入理解执行计划解析与渲染机制【免费下载链接】pev2 Postgres Explain Visualizer 2 项目地址: https://gitcode.com/gh_mirrors/pe/pev2 Postgres Explain Visualizer 2（PEV2）是一款强大的PostgreSQL执行计划可视…...

编程新知 2026/3/28 23:14:36

1.HTML：

2.CSS

3.JS

效果展示：

相关文章：