-
2020-06-19 11:24:22
实现倒计时效果
1、核心算法:输入的时间减去现在的时间就是剩余的时间（即倒计时）但是不能拿着时分秒相减
注意：比如05分减去25分，结果会是负数
2、用时间戳来做，用户输入的时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3、把剩余的时间总的毫秒数换算成天、时、分、秒
转换公式如下:
d = parseInt(总的秒数 / 60 / 60 / 24); //计算天数
h = parseInt(总的秒数 / 60 / 60 % 24); //计算小时
m = parseInt(总的秒数 / 60 % 60); //计算分钟
s = parseInt(总的秒数 % 60); //计算秒数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script> //倒计时效果 //1、核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数 //2、用时间戳来做，用户输入的时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。 //3、把剩余的时间总的毫秒数换算成天、时、分、秒 /* 转换公式如下: d = parseInt(总的秒数 / 60 / 60 / 24); //计算天数 h = parseInt(总的秒数 / 60 / 60 % 24); //计算小时 m = parseInt(总的秒数 / 60 % 60); //计算分钟 s = parseInt(总的秒数 % 60); //计算秒数 */ function countDown(time) { var nowTime = +new Date(); //获取当前时间的时间戳 var inputTime = +new Date(time); //获取输入时间的时间戳 var times = (inputTime - nowTime) / 1000; //获取两个时间相差的秒数 var d = parseInt(times / 60 / 60 / 24); //计算天数 d = d < 10 ? '0' + d : d; var h = parseInt(times / 60 / 60 % 24); //计算小时 h = h < 10 ? '0' + h : h; var m = parseInt(times / 60 % 60); //计算分钟 m = m < 10 ? '0' + m : m; var s = parseInt(times % 60); //计算秒数 s = s < 10 ? '0' + s : s; return d + '天' + h + '时' + m + '分' + s + '秒'; } console.log(countDown('2020-6-19 11:30:00')); var date = new Date(); console.log(date); </script> <body> </body> </html>更多相关内容 -
javascript实现倒计时并弹窗提示特效
2020-10-24 03:54:04倒计时的功能在我们做项目的时候会经常遇到，这里给大家分享的是个人编写的一个简易的效果代码，有需要的小伙伴可以参考下 -
js实现倒计时
2016-09-20 21:36:31javascript实现倒计时 -
javascript实现倒计时（精确到秒）
2020-12-12 10:55:22代码相当简单实用，这里就不多废话了，小伙伴们简单看下就能明白 <!DOCTYPE ...<... <head>...div id="d -
js实现倒计时效果
2017-07-07 17:42:53js实现倒计时效果，天，小时，分钟的倒计时 -
js实现倒计时关键代码
2020-12-12 15:58:44其实倒计时的效果实现起来也是很简单的,并不复杂. 首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤: 1.获取当前的时间,并且定义结束的时间 2.用求未来时间和当前时间的时间差,... -
javascript实现倒计时跳转页面
2020-10-22 23:26:41本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。 -
JS实现倒计时图文效果
2020-10-17 17:39:35主要为大家详细介绍了JS实现倒计时图文效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 -
Javascript实现倒计时（防页面刷新）实例
2020-10-20 21:28:19本文分享了Javascript实现倒计时并且页面不刷新的实例，具有很好的参考价值，需要的朋友一起来看下吧 -
js实现倒计时器自定义时间和暂停
2020-12-12 00:48:02js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时 分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释） css html,body{ width:100%;height:100%; } .content{ ... -
Javascript实现倒计时（计时器）
2022-06-21 14:16:29用js 实现倒计时功能，详细代码，及讲解如下展开全文用js 实现倒计时功能，详细代码，及讲解如下
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"href="index.css"></link> </head> <body> <h1 align="center">纪念日</h1> <div id="timdiv"> <span id="hour" class="tim"></span> <span id="minute" class="tim"></span> <span id="second" class="tim"></span> </div> <script src="index.js"></script> </body> </html>CSS代码：
*{ padding: 0; margin: 0; } body{ background-color: aquamarine; } .tim{ background-color: aqua; font-size: 250px; color: rgb(237, 231, 231); } #timdiv{ position: absolute; left: 275px } h1{ font-size: 250px; }js代码：
var hour = document.getElementById('hour'); var minute = document.getElementById('minute'); var second = document.getElementById('second'); var inputtime = +new Date('2022-6-21 18:00:00');//自定义的毫秒数 timer();//先调用一次，避免第一次的卡顿 setInterval(timer,1000); function timer(){ var nowtime = +new Date();//返回当前的总毫秒数 var time = (inputtime - nowtime) / 1000 ;// 1秒=1000毫秒 剩余需要倒计时的总秒数 var h = parseInt(time/60/60%24); var m = parseInt(time/60%60); var s = parseInt(time%60); h = h < 10 ? '0' + h : h;//如果小于10前面补零，大于10直接填写 hour.innerHTML = h + ':'; m = m < 10 ? '0' + m : m;//如果小于10前面补零，大于10直接填写 minute.innerHTML = m + ':'; s = s < 10 ? '0' + s : s;//如果小于10前面补零，大于10直接填写 second.innerHTML = s; }
-
js实现倒计时时分秒
2019-03-29 17:15:17js实现倒计时的例子 -
原生js实现倒计时功能 图片
2019-02-14 16:14:23日常开发中，电商经常使用到抢购，不过当抢购的时候会用到倒计时 -
js实现倒计时及时间对象
2020-11-28 01:43:36JS实现倒计时效果代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>h <style> #box { width: 100%; height: 400px; ... -
JS实现倒计时和文字滚动的效果实例
2020-10-25 07:56:53主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下 -
javascript实现下班倒计时效果的方法(可桌面通知)
2020-12-08 19:26:50本文实例讲述了javascript实现下班倒计时效果的方法。分享给大家供大家参考。具体如下： 周末了，搞个下班倒计时，娱乐下。 确保下面三点： 1、非IE浏览器，较高Chrome版本，已开启HTML5桌面通知。具体设置见下面... -
JS 实现倒计时数字时钟效果【附实例代码】
2020-10-22 15:27:29下面小编就为大家带来一篇JS 实现倒计时数字时钟效果【附实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做一个参考。 -
js实现倒计时(距离结束还有)示例代码
2020-10-27 02:16:12本文与大家分享个js实现倒计时的代码，主要实现功能距离结束还有多少时间，感兴趣的朋友可以参考下，希望对大家学习js有所帮助 -
纯js实现倒计时功能
2020-10-20 17:00:47本文主要介绍了通过js实现页面的倒计时功能的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧 -
原生js实现倒计时--2018
2020-10-20 08:45:56本文主要介绍了原生js实现倒计时--2018的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧 -
C#结合JavaScript实现秒杀倒计时的方法
2020-09-03 20:36:13主要介绍了C#结合JavaScript实现秒杀倒计时的方法,涉及C#结合javascript操作时间的技巧,非常具有实用价值,需要的朋友可以参考下 -
javascript实现倒计时效果
2020-11-21 03:13:22本文实例为大家分享了javascript实现倒计时效果的具体代码，供大家参考，具体内容如下 首先先写一个布局 <!--倒计时--> <!DOCTYPE html> <html> <head> <meta ... -
js实现倒计时效果（小于10补零）
2020-10-20 06:09:03本文主要介分享了js实现倒计时效果（小于10补零）的实例代码，具有很好的参考价值。下面跟着小编一起来看下吧 -
js实现指定时间倒计时效果
2020-12-29 10:29:30本文实例为大家分享了js实现指定时间倒计时的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计时</title> </...
