首页 > 编程笔记 > JavaScript笔记 > JS面向对象编程
阅读:56
JS实现倒计时功能
本示例利用 JavaScript 设计一个倒计时显示牌,实现方法:用结束时间减去现在时,获取时间差,再利用数学方法从时间差中分别获取日,时、分、秒等信息,最后通过定时器设置每秒执行一次,实现实时更新。
把时间差转换为天数、小时数、分钟数和秒数显示。主要是用
完整代码如下:
2) 使用定时器设计每秒钟调用倒计时函数一次。
【操作步骤】
1) 使用 new Date() 获取当前时间,使用 new 调用一个带有参数的 Date 对象,定义结束的时间,endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后,求两个时间差。把时间差转换为天数、小时数、分钟数和秒数显示。主要是用
%
取模运算。得到距离结束时间的毫秒数(剩余毫秒数),除以 1000 得到剩余秒数,再除以 60 得到剩余分钟数,再除以 60 得到剩余小时数。除以 24 得到剩余天数。剩余秒数 lefttime/1000 模 60 得到秒数,剩余分钟数 lefttime/(1000 * 60) 模 60 得到分钟数,剩余小时数 lefttime/(1000 * 60 * 60) 模 24 得到小时数。完整代码如下:
var showtime = function () { var nowtime = new Date(), //获取当前时间 endtime = new Date("2020/8/8"); //定义结束时间 var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数 leftd = Math.floor(lefttime/(1000*60*60*24)), //计算天数 lefth = Math.floor(lefttime/(1000*60*60)%24), //计算小时数 leftm = Math.floor(lefttime/(1000*60)%60), //计算分钟数 lefts = Math.floor(lefttime/1000%60); //计算秒数 return leftd + "天" + lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串 }
2) 使用定时器设计每秒钟调用倒计时函数一次。
var div = document.getElementById("showtime"); setInterval (function () { div.innerHTML = showtime(); }, 1000); //反复执行函数本身显示结果如下:
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频