定时器 倒计时的一个实现

最新推荐文章于 2021-02-18 16:12:38 发布
最新推荐文章于 2021-02-18 16:12:38 发布
阅读量94 收藏
点赞数
分类专栏： javascript 文章标签： JavaScript prototype HTML ViewUI 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> 定时器 倒计时的一个实现 </title>
 </head>
 <body>
 <div id="timerShow" style="width:100px;height:20px;color:red;border:#ccc solid 1px;text-align: center;"></div>
  <script type="text/javascript">
	function Timer(id){
		this.element = document.getElementById(id);   
		this.timer = null;   
		this.count = 0;   
	}   
	Timer.prototype = {   
		begin : function(count,time){
			this.count = count;
			this.time = time || 500;//默认500ms执行一次
			this.show();   
			var _this = this;   
			this.timer = setInterval(function(){_this.show();}, _this.time);   
		}, 
		show : function(){   
			this.element.innerHTML = this.count < 0 ? clearInterval(this.timer) || "0" : this.count--;   
		}
	}

	var t = new Timer("timerShow");
	//倒计时,从60开始,每100ms减1,到0停止
	t.begin(60,100); 
	t.show();
  </script>
</body>
</html>

 

飘然的风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用定时器倒计时
xhd1236cs的博客
02-17 1356
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
定时器计时
chengcao123的博客
11-03 142
前言 1：也就是TIM6最小要二分频 2:如果想使用定时器更新中断，需要先使能更新中断，然后再使能定时器就可以用了 HAL库配置 84M/(8400-1)=10KHZ=100US 100*20000=2S auto-reload preload:是否使能自动重装载，如果没有使能，那么就可以在任何时刻通过软件进行更新。如果使能了的话，那么重新设置的值，只能在跑完原本那个周期才会重新跑我们新设定的那个值 影子寄存器：我们初始化配置预分频寄存器和计数器就是源寄存器，使我们可以进行读和写的。影子寄存器是无法操作
定时器Interval实现倒计时功能
Xanthin的博客
12-21 3215
功能： 做一个按钮“点击开始”，点击之后进入倒计时，倒计时完毕之后变回”点击开始“代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="timer" onclick="st
Timer定时器实现一分钟倒计时功能
大城小小爱的博客
06-14 6191
private Timer mTimer = null; private TimerTask mTimerTask = null; private static int delay = 1 * 1000; // 1s private static int period = 1 * 1000; // 1s private static int count = 60; pri
深入理解定时器系列第三篇——定时器应用(时钟、倒计时、秒表和闹钟)
weixin_34362790的博客
08-17 498
前面的话 　　本文属于定时器的应用部分，分别用于实现与时间相关的四个应用，包括时钟、倒计时、秒表和闹钟。与时间相关需要用到时间和日期对象Date，详细情况移步至此   时钟 　　最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可 &lt;div id="myDiv"&gt;&lt;/div&gt; &lt;script...
利用定时器实现倒计时
cpsxn的博客
02-18 4208
利用定时器实现倒计时功能 分析： 1.三个盒子分别装时、分、秒；利用innerHTML放入计算出的时、分、秒 2.倒计时是不断变化的，每隔一秒调用一次，用定时器自动变化：setInterval 3.第一次执行时会有间隔的毫秒数，刚刷新的页面会有空白，解决方法：采用封装函数的方式，先调用一次防止有页面空白问题 //1.三个盒子分别装时、分、秒； <div> <span class="hour">时</span> <span class="minute
js定时器实现倒计时效果
10-19
主要为大家详细介绍了js定时器实现倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android定时器和倒计时实现淘宝秒杀功能
08-28
"Android定时器和倒计时实现淘宝秒杀功能" Android定时器和倒计时实现淘宝秒杀功能是Android开发中的一项重要技术，旨在实现淘宝秒杀的功能。本文将详细介绍Android定时器和倒计时的实现方法，并提供了相关的代码...
Android使用Handler实现定时器与倒计时器功能
08-27
Android 使用 Handler 实现定时器与倒计时器功能 Android 中的 Handler 是一种消息机制的上层接口，它提供了许多...Handler 提供了一个简单的方式来实现定时器和倒计时器功能，开发者可以根据需要选择合适的实现方式。
Android CountDownTimer实现定时器和倒计时效果
08-28
Android CountDownTimer是一个非常实用的工具类，可以帮助开发者实现定时器和倒计时效果。在Android开发中，CountDownTimer类被广泛应用于实现Splash屏幕、倒计时、定时任务等场景。本文将详细介绍Android ...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
07-24
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
基于Springboot和Vue的结合疫情情况的婚恋系统源码 结合疫情情况的婚恋系统代码（高分毕设）
最新发布
07-24
结合疫情情况的婚恋系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
LCD1602定时器倒计时
10-13
可以使用Arduino和LCD1602显示屏来实现定时器倒计时。首先需要设置一个计时器，然后在LCD1602上显示剩余时间。具体步骤如下： 1. 定义计时器变量，例如：int countDown = 60; // 倒计时60秒 2. 在setup()函数中初始...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值