新加入一个项目的集中开发，遇到一个需要倒计时的需求，经过测试，有以下几种方案，分享出来：

方案一：

页面Html：

  1. <span style="font-size:18px;"><html>
  2. <head>
  3. <meta charset="utf-8">
  4. </head>
  5. <body onload="timeCounter('timeCounter')">
  6. <p id="timeCounter">2:00:00</p>
  7. </body>
  8. </html></span>

JavaScript代码：

  1. <span style="font-size:18px;"><script>
  2. var timeCounter = (function () {
  3. var int;
  4. var timeID = SumTime().split(":");
  5. var total =parseInt(timeID[0] * 3600) + parseInt(timeID[1] * 60) + parseInt(timeID[2]);//将时间换算成秒数
  6. return function (elemID) {
  7. obj = document.getElementById(elemID);
  8. var s = (total % 60) < 10 ? ('0' + total % 60) : total % 60;//秒
  9. var h = total / 3600 < 10 ? ('0' + parseInt(total / 3600)) : parseInt(total / 3600);//时
  10. var m = (total - h * 3600) / 60 < 10 ? ('0' + parseInt((total - h * 3600) / 60)) : parseInt((total - h * 3600) / 60);//分
  11. obj.innerHTML = h + ' : ' + m + ' : ' + s;
  12. total--;
  13. int = setTimeout("timeCounter('" + elemID + "')", 1000);
  14. if (total < 0) clearTimeout(int);
  15. }
  16. })()
  17. function SumTime() {
  18. var ap = new Date().toLocaleTimeString().substring(0, 2);
  19. var startTime = new Date().toLocaleTimeString().substring(2);
  20. var endTime = "15:00:00";
  21. var start = new Array;
  22. var end = new Array;
  23. start = startTime.split(":");
  24. end = endTime.split(":");
  25. var hh = end[0] - start[0];
  26. if (ap == "下午" || ap=="PM") { hh -= 12;}
  27. if (end[1] < start[1]) {
  28. hh -= 1;
  29. var mm = end[1] + 60 - start[1];
  30. } else {
  31. var mm = end[1] - start[1];
  32. }
  33. if (end[2] < start[2]) {
  34. mm -= 1;
  35. var ss = end[2] + 60 - start[2];
  36. } else {
  37. var ss = end[2] - start[2];
  38. }
  39. var diffTime = hh + ":" + mm + ":" + ss;
  40. return diffTime;
  41. }
  42. </script></span>

方案二：

  1. <span style="font-size:18px;"><meta charset="utf-8">
  2. <div>
  3. <span id='daya'></span>天
  4. <span id='hoursa'></span>小时
  5. <span id='minua'></span>分
  6. <span id='secoa'></span>秒
  7. </div></span>

js：

  1. <span style="font-size:18px;"><script type="text/javascript">
  2. var a=7200;         //以毫秒为单位
  3. function fomtime()
  4. {
  5. a=a-1000;
  6. var b=new Date();
  7. b.setTime(0);
  8. var c=new Date();
  9. c.setTime(a);
  10. var day1=b.getDate();        //为方便调用，把天数、小时等单独定义
  11. var hours1=b.getHours();
  12. var minu1=b.getMinutes();
  13. var seco1=b.getSeconds();
  14. var day2=c.getDate();
  15. var hours2=c.getHours();
  16. var minu2=c.getMinutes();
  17. var seco2=c.getSeconds();
  18. var day=day2-day1;
  19. var hours=hours2-hours1;
  20. var minu=minu2-minu1;
  21. var seco=seco2-seco1;
  22. document.getElementById('daya').innerHTML=day;
  23. document.getElementById('hoursa').innerHTML=hours;
  24. document.getElementById('minua').innerHTML=minu;
  25. document.getElementById('secoa').innerHTML=seco;
  26. setTimeout("fomtime()",1000);
  27. }
  28. fomtime();
  29. </script></span>

方案三：

  1. <span style="font-size:18px;"><script>
  2. var second = 7200; // 剩余秒数
  3. // 写一个方法，将秒数专为天数
  4. var toDays = function(){
  5. var s = second % 60; // 秒
  6. var mi = (second - s) / 60 % 60; // 分钟
  7. var h =  ((second - s) / 60 - mi ) / 60 % 24; // 小时
  8. var d =  (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天
  9. return  d + "天" + h + "小时" + mi + "分钟" + s + "秒";
  10. }
  11. //定时器
  12. window.setInterval(function(){
  13. second --;
  14. document.getElementById("showTimes").innerHTML = toDays ();
  15. }, 1000);
  16. </script>
  17. <p id="<span margin: 0px; padding: 0px; border: currentColor; color: black; background-color: inherit;">font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>

总结：

总结一下上面的集中方法，其实就是一种方法：将时间差转化为以秒为单位的数，然后写定时器美妙执行一次时间变化，只是这个变化的方式稍有不同，但是都离不开SetTimeout延时这个方法,另一个就是window的setInterval设置时间间隔，思想是一样的。

javascript 时间倒计时的更多相关文章

  1. javascript 时间倒计时效果

    <div id="divdown1"></div> <script language="javascript" type=&quo ...

  2. 原生JavaScript时间倒计时的方法

    这个思路是来源用%的方法来做的: 以前用%做过转秒的 现在用来做倒计时方法: 需要用到的方法是getTime:获取距离1970年1月1日午夜00:00之间的毫秒差: var targetTime=ne ...

  3. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  4. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  5. 用Javascript 实现倒计时

    用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. Java 获取当前时间及实现时间倒计时功能

    引言 在一些项目中或是一些特殊的业务场景中,需要用到显示系统的当前时间,以及一些固定的时间倒计时,时间到后做一些什么事情的业务 .接下来咱们就具体看看代码是怎么实现的: <%@ page lan ...

  7. javascript 时间操作

    javascript时间函数 javascript提供了Date对象来进行时间和日期的计算.Date对象有多种构造函数: 1.dateObj=new Date() //当前时间 2.dateObj=n ...

  8. 第一百零四节，JavaScript时间与日期

    JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...

  9. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. ACM/ICPC 之 最短路-SPFA+正逆邻接表(POJ1511(ZOJ2008))

    求单源最短路到其余各点,然后返回源点的总最短路长,以构造邻接表的方法不同分为两种解法. POJ1511(ZOJ2008)-Invitation Cards 改变构造邻接表的方法后,分为两种解法 解法一 ...

  2. SqlDateTime 溢出。

    SqlDateTime 溢出.必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间 解决方法:不要怀疑自己的判断就是数据库字段里的datatime ...

  3. 【leetcode】Integer to Roman & Roman to Integer（easy）

    Roman to Integer Given a roman numeral, convert it to an integer. Input is guaranteed to be within t ...

  4. 【编程题目】输入一个单向链表，输出该链表中倒数第 k 个结点

    第 13 题(链表):题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表的尾指针.链表结点定义如下: struct ListNode {int m_nKey;Lis ...

  5. IOS - 键盘处理

    iOS 发布了很多关于屏幕上键盘的通知.下面列出了这些通知的简要解释: UIKeyboardWillShowNotification 当键盘即将要显示的时候将会发出这个通知.这个通知包含了用户信息库, ...

  6. php安全编程： register_globals的安全性

    register_globals?本身并非安全风险.但是,它为跟踪用户输入和确保应用程序安全增加了难度.为什么会这样? 因为如果打开 register_globals,在全局名称空间和 $_GET.$ ...

  7. Oracle、SQL Server、MySQL数据类型对比

    1,标准SQL数据类型 BINARY 每个字符占一个字节 任何类型的数据都可存储在这种类型的字段中.不需数据转换(例如,转换到文本数据).数据输入二进制字段的方式决定了它的输出方式. BIT 1 个字 ...

  8. iOS开发UI篇—UIScrollView控件实现图片缩放功能

    iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...

  9. Cityengine, 3ds MAX, FME

    Cityengine 和 3ds MAX 一次只可以导入 (import) 一个模型. FME可以一次导入多个模型,因此可以用它来进行数据整合,然后放到cityengine里头去现实.FZViewer ...

  10. xth的旅行（codevs 1450）

    题目描述 Description 毕业了,Xth很高兴,因为他要和他的 rabbit 去双人旅行了.他们来到了水城威尼斯.众所周知(⊙﹏⊙b汗),这里的水路交通很发达,所以 xth 和 rabbit ...