JavaScript实现的计时器效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/718974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

https【详解】与http的区别,对称加密,非对称加密,证书,解析流程图

http 和 https 的区别 http 是明文传输&#xff0c;敏感信息容易在传输过程中被劫持https http加密&#xff0c;劫持了也无法解密 https 用到的加密方式 https 同时使用了对称加密和非对称加密&#xff0c;之所以没有全部使用非对称加密&#xff0c;是因为非对称加密的运算更加…

JavaScript:export 和 export default

文章目录 exportexport defaultexport 和 export default都使用 在JavaScript ES6的模块系统中&#xff0c;export 和 export default 都是用来导出模块中对外可见的变量、函数、类或对象的语法&#xff0c;但是它们的作用和使用方式有所不同&#xff1a; export export 关键字…

四种垃圾回收算法

1.标记清除算法 该算法先标记&#xff0c;后清除&#xff0c;将所有需要回收的算法进行标记&#xff0c;然后清除&#xff1b;这种算法的缺点是&#xff1a;效率比较低&#xff1b;标记清除后会出现大量不连续的内存碎片&#xff0c;这些碎片太多可能会使存储大对象会触发GC回…

【设计模式】观察者模式及函数式编程的替代C++

本文介绍观察者模式以及使用函数式编程替代简单的策略模式。 观察者模式 观察者模式是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;其所有依赖者都会收到通知并自动更新。 当对象间存在一对多关系时&#…

Spring中Bean的作用域、实例化方式、生命周期、循环依赖问题

Spring中Bean的作用域、实例化方式、生命周期、循环依赖问题 一、Bean的作用域1.singleton2.prototype3.其他scope值 二、Bean的实例化方式1.通过构造方法实例化2.通过简单工厂模式实例化3.通过factory-bean实例化4.通过FactoryBean接口实例化5.BeanFactory和FactoryBean的区别…

【大厂AI课学习笔记NO.60】(13)模型泛化性的评价

我们学习了过拟合和欠拟合&#xff0c;具体见我的文章&#xff1a;https://giszz.blog.csdn.net/article/details/136440338 那么今天&#xff0c;我们来学习模型泛化性的评价。 泛化性的问题&#xff0c;我们也讨论过了&#xff0c;那么如何评价模型的泛化性呢&#xff1f; …

激光SLAM技术助力富唯智能复合机器人的应用场景无限拓展

随着科技的不断进步&#xff0c;智能机器人已成为现代工业、服务、医疗等多个领域的重要角色。而在这一变革中&#xff0c;激光SLAM技术发挥着至关重要的作用。特别是对于富唯智能复合机器人来说&#xff0c;激光SLAM技术不仅提升了其智能化水平&#xff0c;更使其应用场景变得…

esp3455235

在这里插入代码片gdasgdsfgdfh dfahahdfh

【促销定价】背后的算法技术3-数据挖掘分析

【促销定价】背后的算法技术3-数据挖掘分析 01 整体分析1&#xff09;整体概览2&#xff09;类别型特征概览3&#xff09;数值型特征概览 02 聚合分析1&#xff09;天维度2&#xff09;品维度3&#xff09;价格维度4&#xff09;数量维度 03 相关分析1&#xff09;1级品类2&…

无公网ip环境使用DS file软件远程访问内网群晖NAS中储存的文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用程序具有…

echarts如何实现3D饼图(环形图)?

一、实现的效果 二、具体步骤 1.安装依赖 npm install echarts 2.引入echarts import * as echarts from echarts; 注意&#xff1a;这里需要用到echarts-gl&#xff0c;必须单独引入才可以 import echarts-gl; 3.echarts部分代码 我知道这部分内容很多&#xff0c;但只要cv…

社情民意调查的内容

本文由群狼调研&#xff08;长沙社情民意调查&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。社情民意调查的内容通常包括以下几个方面&#xff1a; 1.社会热点问题&#xff1a;针对当前社会热点问题进行调查&#xff0c;收集公众对该问题的态度和看法&#xf…

羊大师揭秘羊奶与健康,美味的保健佳品

羊大师揭秘羊奶与健康&#xff0c;美味的保健佳品 羊奶确实是一种美味且健康的保健佳品&#xff0c;其独特的营养成分和风味使其成为许多人的健康选择。以下是一些羊奶与健康的关系&#xff1a; 营养丰富&#xff1a;羊奶含有丰富的蛋白质、脂肪、矿物质和维生素&#xff0c;…

ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a; http://122.227.135.243:9666 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbach…

大模型ChatGLM-6B实现本地部署

大模型ChatGLM-6B实现本地部署 一、写在前面&#xff1a;二、ChatGLM-6B下载&#xff1a;三、项目所需要的环境配置&#xff1a;四、项目运行&#xff1a;五、遇到的主要问题及解决 一、写在前面&#xff1a; 1、 确保你的电脑中已安装git&#xff0c;git lfs。 2、确保你的电…

浅析前端的堆栈原理以及深浅拷贝原理

浅析前端的堆栈原理以及深浅拷贝原理 首先来看一个案例 const obj {name:hzw,age:18 } let objName2 obj objName2.age 12 console.log(obj,objName2) // {name: hzw, age: 12} {name: hzw, age: 12}这里是不是很奇怪&#xff0c;为什么&#xff0c;为什么我改变objName2的…

Hierarchical Text-ConditionalImage Generation with CLIP Latents笔记

1 Title Hierarchical Text-Conditional Image Generation with CLIP Latents&#xff08;Aditya Ramesh、Prafulla Dhariwal、Alex Nichol、Casey Chu、Mark Chen&#xff09; 2 Conclusion Contrastive models like CLIP have been shown to learn robust representations …

read()函数

read() 函数用于从文件描述符&#xff08;通常是套接字、文件等&#xff09;读取数据。 #include <unistd.h>ssize_t read(int fd, void *buf, size_t count);fd&#xff1a; 是文件描述符&#xff0c;可以是套接字、文件等。 buf&#xff1a; 是一个指向要读取数据的缓…

AirPods Pro 2 耳机推送新固件,苹果Find My功能助力产品成长

苹果公司面向 AirPods Pro 2&#xff08;包括 USB-C 和 Lightning 版本&#xff09;&#xff0c;推出了全新的测试版固件更新&#xff0c;版本号为 6E188&#xff0c;高于 12 月份发布的 6B34 固件。 苹果和往常一样&#xff0c;并没有提供详细的更新日志或者说明&#xff0c…

算法刷题day20:二分

目录 引言概念一、借教室二、分巧克力三、管道四、技能升级五、冶炼金属六、数的范围七、最佳牛围栏 引言 这几天一直在做二分的题&#xff0c;都是上了难度的题目&#xff0c;本来以为自己的二分水平已经非常熟悉了&#xff0c;没想到还是糊涂了一两天才重新想清楚&#xff0…