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

JavaScript实现的计时器效果

news 2026/4/8 16:21:50

之前做过电商网站倒计时的效果，今天在倒计时的基础上，把代码修改了一下，改为计时器效果，实现了以下功能：
1.点击“开始”后，按秒计时且“开始”文字变为“停止”；
2.点击“停止”，计时停止，文字变为“开始”；
3.再点击“开始”，计时器从0开始重新计时。
效果如图所示：
在这里插入图片描述
“开始”和“停止”使用div标记实现，利用innerHTML改变其中的文字内容。

<div class="startTime">开始</div>  <!-- 单击开始，再单击停止 -->
<div class="dispTime"></div>  <!-- 显示计时器的部分 -->

在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>计时器</title><style type="text/css">.startTime {cursor: pointer;font-size: 30px;border: 1px solid #ccc;border-radius: 10px;width: 120px;margin: 10px auto;text-align: center;}.startTime:hover{background-color: aliceblue;}.dispTime {position: absolute;font-size: 60px;left: 50%;top: 30%;transform: translate(-50%, -50%);color:red;}</style></head><body><div class="startTime">开始</div>  <!-- 单击开始，再单击停止 --><div class="dispTime"></div>  <!-- 显示计时器的部分 --><script>var startTime = document.querySelector('.startTime');var dispTime = document.querySelector('.dispTime');var times =0;             //全局变量，从0开始计时，初始值为0var timer = null;         //全局变量,初始值为空startTime.addEventListener('click', function(){if(this.innerHTML=='开始'){times = 0;                 //清除之前的时间，从0开始重新 计时timer = setInterval(countTime, 1000);     //开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始this.innerHTML='停止';   //文本设置为停止}else{clearInterval(timer);       //停止定时器this.innerHTML='开始';      //文本设置为开始}});//countTime()函数把总秒数显示为时、分、秒效果function countTime() {var hh = parseInt(times / 60 / 60 );hh = hh < 10 ? '0' + hh : hh;var mm = parseInt(times / 60 % 60);mm = mm < 10 ? '0' + mm : mm;var ss = parseInt(times % 60);ss = ss < 10 ? '0' + ss : ss;dispTime.innerHTML=  hh + ':' + mm + ':' + ss;times++;}</script></body>
</html>

在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。

		var  timer = setInterval(countTime, 1000);

相关文章：

JavaScript实现的计时器效果

之前做过电商网站倒计时的效果&#xff0c;今天在倒计时的基础上&#xff0c;把代码修改了一下&#xff0c;改为计时器效果&#xff0c;实现了以下功能&#xff1a; 1.点击“开始”后&#xff0c;按秒计时且“开始”文字变为“停止”&#xff1b; 2.点击“停止”&#xff0c;计…...

编程日记 2024/3/4 9:38:11

仿函数（Functor（c++））

定义 仿函数&#xff08;Functor&#xff09;是一个可以像函数那样被调用的类对象。这意味着它实现了operator()&#xff0c;使得类的对象可以像函数那样被调用。 仿函数的主要特点 它是一个类。它重载了operator()。可以通过创建该类的对象&#xff0c;并像函数那样调用该对…...

编程日记 2024/3/4 9:37:10

智能汽车加速车规级存储应用DS2431P+TR 汽车级EEPROM 存储器IC

DS2431PT&R是一款1024位1-Wire EEPROM芯片&#xff0c;由四页存储区组成&#xff0c;每页256位。数据先被写入一个8字节暂存器中&#xff0c;经校验后复制到EEPROM存储器。该器件的特点是&#xff0c;四页存储区相互独立&#xff0c;可以单独进行写保护或进入EPROM仿真模式…...

编程日记 2024/3/4 9:33:06

js json转换成字符串

js中JSON数据转换成字符串&#xff0c;可以使用JSON.stringify()方法。 var obj {name: "张三", age: 18, gender: "男"}; var jsonString JSON.stringify(obj); console.log(jsonString); // 输出 {"name":"张三","age"…...

编程日记 2024/3/4 9:32:05

Linux笔记--基本操作指令

一、查看日期与日历 1.date指令 显示日期 #用法1:dateCST: China Standard Time时区&#xff0c;中国标准时间 #用法2: date 指定格式 [常用格式]: "%Y-%m-%d"(%F): 2022-07-25 "%H:%M:%S"(%T): 14:53:44 "%F %T" #用法3: date -d "-1 da…...

编程日记 2024/3/4 9:28:00

论文阅读：基于超像素的图卷积语义分割（图结构数据）

#Superpixel-based Graph Convolutional Network for Semantic Segmentation github链接 引言 GNN模型根据节点特征周围的边来训练节点特征&#xff0c;并获得最终的节点嵌入。通过利用具有不同滤波核的二维卷积对来自附近节点的信息进行整合&#xff0c;给定超像素方法生成的…...

编程日记 2024/3/4 9:25:58

记录踩过的坑-macOS下使用VS Code

目录 切换主题 安装插件 搭建Python开发环境 装Python插件 配置解释器 打开项目 打开终端 切换主题 安装插件 方法1 方法2 搭建Python开发环境 装Python插件 配置解释器 假设解释器已经通过Anaconda建好&#xff0c;只需要在VS Code中关联。 打开项目 打开终端...

编程日记 2024/3/4 9:24:57

30天JS挑战(第十四天)------数据的复制

第十四天挑战(数据的复制) 地址&#xff1a;https://javascript30.com/ 所有内容均上传至gitee&#xff0c;答案不唯一&#xff0c;仅代表本人思路 中文详解&#xff1a;https://github.com/soyaine/JavaScript30 该详解是Soyaine及其团队整理编撰的&#xff0c;是对源代码…...

编程日记 2024/3/4 9:23:56

【洛谷 P8682】[蓝桥杯 2019 省 B] 等差数列 题解（数学+排序+辗转相除法）

[蓝桥杯 2019 省 B] 等差数列 题目描述 数学老师给小明出了一道等差数列求和的题目。但是粗心的小明忘记了一部分的数列&#xff0c;只记得其中 N N N 个整数。 现在给出这 N N N 个整数&#xff0c;小明想知道包含这 N N N 个整数的最短的等差数列有几项&#xff1f; 输…...

编程日记 2024/3/4 9:19:50

Linux：kubernetes（k8s）部署CNI网络插件（4）

在上一章进行了node加入master Linux&#xff1a;kubernetes&#xff08;k8s&#xff09;node节点加入master主节点&#xff08;3&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136420447?spm1001.2014.3001.5501 但是他们显示还是没准备好 看一下…...

编程日记 2024/3/4 9:18:49

docker save 命令 docker load 命令 快速复制容器

docker save 命令 docker load 命令 1、docker save 命令2、docker load 命令 1、docker save 命令 docker save 命令用于在系统上把正在使用的某个容器镜像 导出成容器镜像文件保存下载&#xff0c;以便在其他系统上导入这个容器镜像文件 以便快速在其他服务器上启动相同的容…...

编程日记 2024/3/4 9:14:44

Apache Flink连载（三十七）：Flink基于Kubernetes部署(7)-Kubernetes 集群搭建-3

🏡 个人主页：IT贫道-CSDN博客 🚩 私聊博主：私聊博主加WX好友，获取更多资料哦~ 🔔 博主个人B栈地址：豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录...

编程日记 2024/3/4 9:11:41

【机器学习】实验6，基于集成学习的 Amazon 用户评论质量预测

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现&#xff08;实验满分&#xff09;&#xff0c;此次代码开源大家可以自行参考学习 有任何疑问或者问题&#xff0c;也欢迎私信博主&#xff0c;大家可以相互讨论交流哟…...

编程日记 2024/3/4 9:07:37

【寸铁的刷题笔记】图论、bfs、dfs

【寸铁的刷题笔记】图论、bfs、dfs 大家好 我是寸铁&#x1f44a; 金三银四&#xff0c;图论基础结合bfs、dfs是必考的知识点✨ 快跟着寸铁刷起来&#xff01;面试顺利上岸&#x1f44b; 喜欢的小伙伴可以点点关注 &#x1f49d; &#x1f31e;详见如下专栏&#x1f31e; &…...

编程日记 2024/3/4 9:04:33

vue2 + axios + mock.js封装过程，包含mock.js获取数据时报404状态的解决记录，带图文，超详细！！！

vue axios mock.js 以下是封装的过程&#xff0c;记录一下 1、首先先了解什么是mock.js的用途及特点 官网地址&#xff1a;Mock.js (mockjs.com) 作用&#xff1a;生成随机数据&#xff0c;拦截 Ajax 请求 优势&#xff1a; 2、了解axios的原理及使用 官网地址&#xff1a…...

编程日记 2024/3/4 9:02:31

对象变更记录objectlog工具(持续跟新)

文章目录 前言演示代码演示环境引入项目项目框架操作步骤 设计介绍参考仓库 前言 系统基于mybatis-plus, springboot环境 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。下面展示预期效果…...

编程日记 2024/3/4 9:00:28

平衡二叉树，二叉树的路径，左叶子之和

第六章 二叉树part04 今日内容&#xff1a; 110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和 110.平衡二叉树 &#xff08;优先掌握递归&#xff09; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&am…...

编程日记 2024/3/4 8:59:27

Sodinokibi勒索病毒最新变种，解密工具更新到2.0版本

Sodinokibi勒索病毒 Sodinokibi勒索病毒又称REvil&#xff0c;自从2019年6月1日&#xff0c;GandCrab勒索病毒运营团伙宣布停止运营之后&#xff0c;Sodinokibi勒索病毒马上接管了GandCrab的大部分传播渠道&#xff0c;同时它也被称为是GandCrab勒索病毒的“接班人”&#xff…...

编程日记 2024/3/4 8:58:26

css 鼠标移入放大的效果

效果 HTML <div class"img-wrap"><img class"img-item" src"../assets/1.png" alt"" srcset""></div> CSS <style lang"less" scoped> .img-wrap {/* 超出隐藏 */overflow: hidden;.img-…...

编程日记 2024/3/4 8:57:25

Transformer模型分布式并行通信量浅析

1.数据并行DP&#xff08;朴素数据并行&#xff0c;Zero数据并行之后补充&#xff09; O ( h 2 ∗ l ) O(h^2*l) O(h2∗l) 每台机器做完自己的梯度后需要做一次All reduce操作来累积梯度&#xff0c;故一个batch计算发送的数据量为每层梯度大小 h 2 h^2 h2乘以层数 l l l 优点…...

编程日记 2024/3/4 8:54:20

图解Simple-BEV核心模块：从2D图像到3D BEV特征图的完整数据流解析

图解Simple-BEV核心模块&#xff1a;从2D图像到3D BEV特征图的完整数据流解析 想象一下&#xff0c;当你驾驶汽车时&#xff0c;眼睛看到的只是前方有限的视野&#xff0c;而大脑却能神奇地将这些二维画面重构为三维空间感知。这正是自动驾驶系统中BEV&#xff08;鸟瞰图&#…...

编程新知 2026/4/8 16:17:15

生成式 AI 驱动下网络安全手册重构与防御体系研究

摘要 生成式 AI 正从根本上改变网络攻击的组织方式、实施效率与欺骗能力&#xff0c;使传统依赖静态特征、固定流程与人工研判的安全手册全面失效。本文以 AI 重构安全手册为核心议题&#xff0c;系统分析生成式 AI 对钓鱼攻击、漏洞利用、渗透测试与社会工程学的赋能机理&…...

编程新知 2026/4/8 16:06:51

Limine文件系统与分区方案：FAT32、ISO9660、MBR和GPT的完美集成

Limine文件系统与分区方案&#xff1a;FAT32、ISO9660、MBR和GPT的完美集成 【免费下载链接】limine Modern, advanced, portable, multiprotocol bootloader and boot manager. 项目地址: https://gitcode.com/gh_mirrors/li/limine Limine是一款现代化、高级的可移植多…...

编程新知 2026/4/8 15:50:42

淘宝镜像证书过期危机：快速切换至registry.npmmirror.com的完整指南

1. 淘宝镜像证书过期问题解析 最近不少开发者在使用npm安装依赖时遇到了"certificate has expired"的错误提示。这个问题的根源在于淘宝NPM镜像原地址registry.npm.taobao.org的SSL证书已于2024年1月22日正式过期。作为国内开发者常用的镜像源&#xff0c;这个变动影…...

编程新知 2026/4/8 15:13:51

Singularity安全性详解：如何在容器中保持用户权限不变的终极指南

Singularity安全性详解&#xff1a;如何在容器中保持用户权限不变的终极指南 【免费下载链接】singularity Singularity has been renamed to Apptainer as part of us moving the project to the Linux Foundation. This repo has been persisted as a snapshot right before …...

编程新知 2026/4/8 15:07:48

Laravel 8.x新特性全解析

好的&#xff0c;Laravel 8.x 版本引入了多项重要特性和改进&#xff0c;以下是主要亮点&#xff1a; &#x1f680; Jetstream 应用脚手架 Laravel 8 引入了 Jetstream&#xff0c;这是一个现代化的应用脚手架&#xff0c;替代了之前的 laravel/ui 包。Jetstream 提供&#x…...

编程新知 2026/4/8 14:55:40

React组件生命周期终极指南：30-seconds-of-react中useEffect的进阶用法

React组件生命周期终极指南&#xff1a;30-seconds-of-react中useEffect的进阶用法 【免费下载链接】30-seconds-of-react Short React code snippets for all your development needs 项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-react 掌握React组件生…...

编程新知 2026/4/8 14:02:44

SEO_ 低成本高效进行SEO推广的实战策略

低成本高效进行SEO推广的实战策略 在当今数字化时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为了每个企业网站流量获取的重要手段。SEO推广的成本往往让人望而却步。本文将为您揭示低成本高效进行SEO推广的实战策略&#xff0c;帮助您在有限的预算内最大化…...

编程新知 2026/4/8 12:59:04

C#调用FHIR API的5大致命陷阱：20年医疗IT架构师亲授避坑清单（含完整可运行代码）

第一章&#xff1a;C#调用FHIR API的5大致命陷阱&#xff1a;20年医疗IT架构师亲授避坑清单&#xff08;含完整可运行代码&#xff09; 未验证FHIR版本兼容性导致解析失败 FHIR服务器可能运行STU3、R4或R4B等不同版本&#xff0c;而Hl7.Fhir.R4与Hl7.Fhir.STU3的资源结构和序列…...

编程新知 2026/4/8 12:53:00

FastAPI OpenAPI文档：从基础配置到高级定制的完整指南

FastAPI OpenAPI文档&#xff1a;从基础配置到高级定制的完整指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi 想要快速构建API并自…...

编程新知 2026/4/8 12:38:48