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

JavaScript实现的计时器效果

news 2026/2/8 21:59: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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11