如何用js源生写计时器

最新推荐文章于 2022-03-04 00:05:09 发布
最新推荐文章于 2022-03-04 00:05:09 发布
阅读量139 收藏
点赞数
分类专栏： js 文章标签： js http css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49199001/article/details/114005510
版权

在这里插入图片描述
首先分清楚几个部分这里是三个部分写在一块分别是css，js，html三个部分
html的内容设置三个时间为零分别为时，分，秒然后设置按钮分别控制开始，暂停，停止（归零）
css部分设置了这个计时器的背景色三个按钮的大小间距颜色和时间的部分
之后细解js部分
定义一个变量c为0z为空
先是为开始添加一个点击事件函数里面为计时器z每一秒运行一次里面函数运行c自行加一下面开始改变数字c%60取余数显示成秒后面分是c%60取余后再%60再取余时就是60*60一小时六十分一分六十秒所以是3600
暂停给暂停添加一个点击事件运行函数clearinterval
此方法能够取消setInterval()方法设置的定时器。
之后停止（归零）为停止按钮添加点击事件运行函数取消定时器，清空c的数字归零改变时分秒的时间统统为零
下面函数为传参判断是否小于10小于返回前面+0和当前时间否则返回原数字

浅绘梨妆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现倒计时
杜伊沫的博客
04-02 1199
原生原生js实现倒计时的思路 1、用原生js实现倒计时，首先得利用 Date 获取系统提供的当前时间，其实还需要一个截止时间，这样才可以去思考下来应该怎么实现倒计时这个功能 2、既然是倒计时，肯定会用setInterval(()=>, 时间数) 来实现自动计时 2、利于系统的当前时间和用户提供的截止时间，我们可以知道总共还剩多少时间，再将剩下时间分别换算成天、时、分和秒， 3、当到了截止时间...
JavaScript基础（十一）——计时器方法
pro1822的博客
04-15 7062
JavaScript基础（十一）——计时器方法
用JavaScript写计时器
qq_41566015的博客
05-10 484
       最近学习了JavaScript，发现JavaScript真是强大，可以为web页面添加许多有趣的东西。下面教大家如何用JavaScript写一个计时器。话不多说，直接上代码：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha...
原生js计时器(学习篇)
skyblue_afan的博客
12-10 660
1、封装一个倒计时函数,这是一个秒的计时器，通常发送短信验证码使用 //倒计时 function daojishi(seconds, obj) { if (seconds > 1) { seconds--; $(obj).text(seconds + "秒后获取 ").attr("disabled", true).css("pointer-events","none"); //禁用按钮 // 定时1秒调用一次 setTimeout(function() { daojishi(s
js自定义定时器的两种方法
Grey_fantasy的博客
02-24 1877
自定义定时器的两种方法： 第一种方法： 定义函数： function sleep(n){//n是传过来的毫秒数 var start=new Date().getTime();//定义起始时间的毫秒数 while(true){ var time=new Date().getTime();//记录当前时间 if(time-start>n){ break; } } } 使用： sleep(2000); 第二种方法 第二种是在业务的时候使用到jax，例如要做一个告
JavaScript源生倒计时时分秒毫秒简单无依赖可扩展性强
08-12
总结，JavaScript源生倒计时的实现并不复杂，关键在于理解时间处理和定时器的工作原理。通过封装成类或函数，我们可以轻松地创建可扩展且灵活的倒计时解决方案。在项目实践中，根据需求进行适当的定制和优化，就能...
Js_demo:源生js轮播图demo
05-18
本示例"Js_demo:源生js轮播图demo"将深入讲解如何利用纯JavaScript（非jQuery或其他库）创建一个基本的轮播图效果。 轮播图是一种常见的网页元素，用于展示一组图片或内容，用户可以通过点击按钮或自动切换来浏览。...
js源生选字游戏
09-22
"js源生选字游戏"是一个基于JavaScript编程语言开发的文字娱乐项目，主要目的是通过互动方式让用户参与文字选择，提升用户对汉字的认知与记忆。在这个游戏中，开发者利用JS（JavaScript）的特性来实现游戏逻辑，包括...
源生js实现验证码功能
07-21
源生js实现验证码功能，附带源码，可以参考学习，
JavaScript源生拼图
11-20
JavaScript源生拼图是一款基于JavaScript实现的互动游戏，它允许用户通过移动图片碎片来完成一幅完整的图像，类似于经典的纸质拼图游戏。这个压缩包包含一个`img`文件夹和一个`demo`文件，使得将其集成到任何Web项目...
原生js实现秒表计时器功能
10-20
主要为大家详细介绍了原生js实现秒表计时器功能，可以开始、暂停、清除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS写一个定时器
大雷
12-03 1174
轮循定时器： 作用：间隔多长时间循环执行。 函数： window.setInterval(code,millisec,lang); 参数说明： code：必填参数。内容为你需要调用的函数或需要执行的表达式。 millisec：必填参数。毫秒参数。表间隔时间。 lang：非必填。JavaScript代码。 实现： // 以2秒为时间间隔，每隔2秒调用login()函数。 window.setInterval("login()", 2000); 定时器： 作用： 多.
js-5秒之后跳转页面
qq_41670147的博客
12-03 1646
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS实现计时器
HowToRemember的博客
06-22 422
网上计时器一大把,闲来无事开记事本自己也码了个.一来页面干净适合魔方竞技计时????,二来随便温故下存JS语法????. 特点 计时器原则按下空格后需松手(keyUp)开始计时,按下空格触(keyDown)到立即停止计时. 销毁本次记录撤回上次最近. 彩蛋本次成绩不计入按钮????. 几个JS小技术点 代码技术点简单,逻辑写的有点复杂没有过多优化,适合初学者研习改造. localStorage:浏览器本地缓存用于存历史最佳记录,下次打开仍有效.清除缓存后清空. sessionSt
原生js、计时器实现倒计时
代码小宝宝的博客
02-16 1872
原生js、计时器实现倒计时 1.Demo展示( 时间差：now—2月28号00:00 )： 2 . Html布局： &amp;amp;lt;div class=&amp;quot;wrap&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;times&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&
使用js做一个简单的秒表计时
becauseof_11的博客
08-16 4375
我们平时登录网页也许会遇到不久之后网页会自动提示您开启了多久这样的界面，那么这就关系到秒表计算的问题了，我们来看看简单秒表是如何做成的，下面来分析一下实现秒表的过程： 首先第一步肯定是分别获取时分秒 第二步就是将它们都置0  第三步就是运用计时器，即setInterval(function(),num)这个函数,里面的num就是你希望执行的速度了 过程解释清楚了，那么具体代码是如何实现的呢
用JS写的一个简易计时器
u011137087的博客
05-04 5965
运行结果如图：点击开始计时，就会显示系统时间，然后这个时钟会每秒更新，点击停止计时，这个时间就会停止。这个是简易版本。代码如下：    1 &lt;!DOCTYPE html&gt;    2 &lt;html lang="en"&gt;    3 &lt;head&gt;    4         &lt;metacharset="UTF-8"&gt;    5         &lt;titl
Js——计时器方法
qq_63654439的博客
03-04 4899
1、setInterval与clearInervar 实现秒表功能 <button class="start">开始</button> <button class="stop">暂停</button> <button class="end">结束</button> <h1 class="time">10:9</h1> <script> let start = docu
原生js实现新年倒计时
weixin_44038355的博客
12-22 1745
效果图： js代码： setInterval(() =&gt; { var date = new Date() var nextyear = date.getFullYear() + 1 var nextsec = new Date(new Date(nextyear,0,1) -1) var secs = nextsec - date.getTime() // ...
源生mysql封装工具类
最新发布
09-13
如果你需要使用源生的MySQL封装工具类，你可以使用JDBC来连接和操作MySQL数据库。在Java中，JDBC提供了一套API来与数据库进行交互，包括连接数据库、执行SQL语句、处理结果等。你可以使用java.sql包中的类和接口来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值