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

JavaScript实现的计时器效果

news 2026/1/16 18:56:24

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/1/15 5:03:56

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/1/15 6:47:17

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/1/14 18:27:53

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/15 6:11:53

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/1/15 5:01:49

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36