利用定时器实现倒计时

利用定时器实现倒计时功能

分析：
1.三个盒子分别装时、分、秒；利用innerHTML放入计算出的时、分、秒
2.倒计时是不断变化的，每隔一秒调用一次，用定时器自动变化：setInterval
3.第一次执行时会有间隔的毫秒数，刚刷新的页面会有空白，解决方法：采用封装函数的方式，先调用一次防止有页面空白问题

//1.三个盒子分别装时、分、秒；
<div><span class="hour">时</span><span class="minute">分</span><span class="second">秒</span></div>

css:

 <style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;color: #fff;font-size: 20px;text-align: center;line-height: 40px;}</style>

js:

<script>//获取元素:时、分、秒、当前输入的时间var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date('2021-2-18 18:00:00');//返回的是用户输入时间的总的毫秒数，可以修改这个值//先调用函数一次，防止第一次刷新页面有空白countDown();//开启定时器setInterval(countDown, 1000);//计算倒计时的函数function countDown() {var nowTime = +new Date(); //返回当前时间总的毫秒数var times = (inputTime - nowTime) / 1000;//返回剩余时间的秒数：（输入时间的毫秒数-当前时间的毫秒数）/1000var h = parseInt(times / 60 / 60 % 24);//时h = h < 10 ? '0' + h : h;//补0hour.innerHTML = h;//把剩余的小时给装时的盒子var m = parseInt(times / 60 % 60);//分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);//秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>

利用定时器实现倒计时相关推荐

使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
html倒计时timer,js如何使用定时器实现倒计时功能
这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下. 日期函数倒计时 = 用将来的时间 - 现在的时间问题:将来时间距 ...
安卓案例：利用定时器实现逐帧动画
安卓案例:利用定时器实现逐帧动画一.运行效果单击[开始]按钮,可以看到逐帧动画效果: 单击[停止]按钮,可以停止动画效果. 二.涉及知识点 1.图像视图(ImageView) 2.按钮(Butto ...
Qt中利用定时器QTimer实时显示当前日期和时间
Qt中利用定时器QTimer实时显示当前日期和时间时显示当前日期和时间.下面说明方法: 1. 在工程中声明一个全局QTimer对象 QTimer *timer; 2. 在构造函数中定义QTimer, ...
STM32F103C8T6基于Arduino框架下利用定时器跑RBG灯闪烁
STM32F103C8T6基于Arduino框架下利用定时器跑RGB灯闪烁
8、TM4单片机的滴答定时器，及利用定时器精确延时
在我们日常使用单片机的时候,延时一般采用循环的方式,但是这样的方式只能用于粗略的延时,但我们需要精准的时间控制的时候,便需要利用定时器获得精确的延时. 本次采用TM4内的滴答定时器. 文章目录 1.滴 ...
android 定时器倒计时,Android CountDownTimer实现定时器和倒计时效果
本文实例为大家分享了Android实现定时器和倒计时的具体代码,供大家参考,具体内容如下直接上代码,相信都看得懂. Android已经帮封装好了一个类,只不过很多人不知道而已. 代码: public ...
51单片机的应用——利用定时器控制输出对称方波
单片机晶振为12MHz,编程实现T0模式1下在P1.1处输出周期为td的对称方波. 分析:利用定时器定时溢出控制P1.1输出的反相,达到输出周期方波 51的TOMD控制着定时器T0的工作,首先设置TM ...
利用定时器1实现流水灯
单片机实验1 题目: 利用定时器1实现流水灯,先从左至右,再从右至左,1s从左到右,1s从右到左(不采用延时函数的方式实现) 思路首先要求使用定时器1,且定时1s,那么先将基础的初始化函数完成,计算 ...

利用定时器实现倒计时

利用定时器实现倒计时相关推荐

最新文章

热门文章