前端js——倒计时效果实现动态显示倒计时

1.页面布局

<h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>

2.js动态显示

getTime()获得设定的时期与1970年1月1日时间相差的毫秒数

1）获得插入数字的位置

var show=document.getElementById("show").getElementsByTagName("span");

2）声明现在的时间和未来的时间

var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

3）获得两个时间差

var num=time.getTime()-timeing.getTime();

4）计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整

var day=parseInt(num/(24*60*60*1000));

5)获得去除天数后剩余的毫秒数

num=num%(24*60*60*1000);

6)计算小时和获得去除小时后剩余的毫秒数

var hour=parseInt(num/(60*60*1000));
num=num%(60*60*1000);

7）计算分钟和获得去除分钟后剩余的毫秒数

var minute=parseInt(num/(60*1000));
num=num%(60*1000);

8）计算秒

var seconde=parseInt(num/1000);

9）页面上显示

              show[0].innerHTML=day;show[1].innerHTML=hour;show[2].innerHTML=minute;show[3].innerHTML=seconde;

10）设置定时器每一秒获取一次新的时间

3.源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1><script>var show=document.getElementById("show").getElementsByTagName("span");setInterval(function(){var timeing=new Date();var time=new Date(2020,0,1,0,0,0);var num=time.getTime()-timeing.getTime();var day=parseInt(num/(24*60*60*1000));           num=num%(24*60*60*1000);var hour=parseInt(num/(60*60*1000));            num=num%(60*60*1000);var minute=parseInt(num/(60*1000));num=num%(60*1000);var seconde=parseInt(num/1000);show[0].innerHTML=day;show[1].innerHTML=hour;show[2].innerHTML=minute;show[3].innerHTML=seconde;},100)</script></body>
</html>

前端js——倒计时效果实现动态显示倒计时相关推荐

html倒计时星期日,Web前端——倒计时效果
一.JavaScript Date对象 getYear() 获取年份,获取年最好用 getFullYear()获取完整格式年份,如2014,一般用这个 getMonth()获取月,从0开始(0~11) ...
前端-js网页特效（一）倒计时效果及原理
目录一.原理二.代码解析(内有注释) css部分 HTML部分: script部分: 三.实际效果图四.结束语一.原理说到倒计时效果,基本面实现的话离不开 setInterval()这个方法 ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
目录前言导语效果预览 html部分移动端样式(mobile.css) pc端样式(style.css) js部分效果演示移动端 pc端总结下载地址前言我是歌谣我有个兄弟巅峰的时 ...
JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）
JS实现倒计时效果 js基础语法实现倒计时效果(需要手动刷新) 核心算法:输入的时间减去现在的时间就是倒计时所剩余的时间,即倒计时,但是不能拿时分秒相减,比如05分减去25分,结果变负. 用时间戳来做 ...
JS写的随机数倒计时效果
JS写的倒计时效果过程: 1.随机生成4-10之间的随机数 2.随机数是几就从几开始倒计时 3.开始倒计时 4.到 0 时倒计时结束(或者点击也可以停止倒计时) 来康康效果图片吧这里我加了个数字小 ...
JS倒计时效果+数字图片
这里用JS结合一组数字图片,写了一个简单的倒计时效果.数字图片大家自己找啦,这里需要注意的就是图片命名--要和图片中的数字保持一致哟. 如果有什么不完善的地方,还请各路大神指点. 代码呈上: < ...
js页面倒计时7天 java_javascript实现倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下首先先写一个布局 #numbers p { position: absolute; font-size: 1 ...
原生JS 实现日期倒计时效果
每逢佳节倍思亲时间滴答滴答的逝去离团聚的日子又近了一点写一个简单的倒计时效果让我们的团聚在一点点看见中来临思路: 1.首先获取当前时间 2.获取所需时间 2.获取时间差(所需时间减去当前时间 ...
Layui数据表格每一行动态显示倒计时
目录声明需求描述后端接口前端代码最终效果声明本文转载自 fengchen0123456789 的以下博客 https://blog.csdn.net/fengchen0123456789 ...

前端js——倒计时效果实现动态显示倒计时

1.页面布局

2.js动态显示

3.源码

前端js——倒计时效果实现动态显示倒计时相关推荐

最新文章

热门文章

前端js——倒计时效果实现 动态显示倒计时

1.页面布局

2.js动态显示

3.源码

前端js——倒计时效果实现 动态显示倒计时相关推荐

最新文章

热门文章

前端js——倒计时效果实现动态显示倒计时

前端js——倒计时效果实现动态显示倒计时相关推荐