• javascript 时间倒计时

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

    方案一：

    页面Html：

    [html] view plain copy
     print?在CODE上查看代码片派生到我的代码片
    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代码：

    [javascript] view plain copy
     print?在CODE上查看代码片派生到我的代码片
    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.   
    18.         function SumTime() {  
    19.                 var ap = new Date().toLocaleTimeString().substring(0, 2);  
    20.                 var startTime = new Date().toLocaleTimeString().substring(2);  
    21.                 var endTime = "15:00:00";  
    22.                 var start = new Array;  
    23.                 var end = new Array;  
    24.                 start = startTime.split(":");  
    25.                 end = endTime.split(":");  
    26.                 var hh = end[0] - start[0];  
    27.                 if (ap == "下午" || ap=="PM") { hh -= 12;}  
    28.                 if (end[1] < start[1]) {  
    29.                     hh -= 1;  
    30.                     var mm = end[1] + 60 - start[1];  
    31.                 } else {  
    32.                     var mm = end[1] - start[1];  
    33.                 }  
    34.                 if (end[2] < start[2]) {  
    35.                     mm -= 1;  
    36.                     var ss = end[2] + 60 - start[2];  
    37.                 } else {  
    38.                     var ss = end[2] - start[2];  
    39.                 }  
    40.                 var diffTime = hh + ":" + mm + ":" + ss;  
    41.                 return diffTime;  
    42.             }  
    43.           
    44.     </script></span>  

    方案二：

    [html] view plain copy
     print?在CODE上查看代码片派生到我的代码片
    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：

    [javascript] view plain copy
     print?在CODE上查看代码片派生到我的代码片
    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>  

    方案三：

    [javascript] view plain copy
     print?在CODE上查看代码片派生到我的代码片
    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.   
    18. <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设置时间间隔，思想是一样的。

  • 相关阅读:
    LeetCode522. 最长特殊序列 II
    docker activiti部署到Linux环境，流程图乱码
    linux docker 命令
    linux 安装docker
    JSON,JSONOBJECT,JSONARRAY 互转
    Python和java 的区别笔记（未完成）
    程序员常读书单整理，附下载地址
    javaweb同一个项目打包两次放在同一个tomcat下
    SSM项目集成Redis
    Chrome浏览器崩溃
  • 原文地址：https://www.cnblogs.com/DoubleEggs/p/6018478.html
Copyright © 2020-2023  润新知