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

JavaScript实现的计时器效果

news 2025/8/12 6:45:12

之前做过电商网站倒计时的效果，今天在倒计时的基础上，把代码修改了一下，改为计时器效果，实现了以下功能：
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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/7/10 15:49:28

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/7/6 2:55:54

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/8/10 15:55:31

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/7/15 20:18:27

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/8/10 4:17:43

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/9 14:50:22

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/7/31 5:56:58