zoukankan      html  css  js  c++  java
  • js 多个倒计时,毫秒倒计时

    其实主要是借鉴了了这篇文的写法(http://tuzwu.iteye.com/blog/819081),俺稍作了修改,以便更适合我的需要:

    实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒;

    效果图如下:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <title></title>
            <style>
                div{
                    width: 100%;
                    height: 50px;
                    margin-bottom: 5px;
                    background: yellowgreen;
                }
            </style>
        </head>
    
        <body>
            
            <h2>毫秒的倒计时</h2>
            <div id="timer1"></div>
            <div id="timer2"></div>
            <div id="timer3"></div>
            <div id="timer4"></div>
            <script>
                var addTimer = function(){
                    var list = [],
                        interval;
                        
                    return function(id,timeStamp){
                        if(!interval){
                            interval = setInterval(go,1);
                        }
                        list.push({ele:document.getElementById(id),time:timeStamp});
                    }
                    
                    function go() {  
                        for (var i = 0; i < list.length; i++) {  
                            list[i].ele.innerHTML = changeTimeStamp(list[i].time);  
                            if (!list[i].time)  
                                list.splice(i--, 1);  
                        }  
                    }
    
                    //传入unix时间戳,得到倒计时
                    function changeTimeStamp(timeStamp){
                        var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
                        if(distancetime > 0){ 
                  //如果大于0.说明尚未到达截止时间
    var ms = Math.floor(distancetime%1000); var sec = Math.floor(distancetime/1000%60); var min = Math.floor(distancetime/1000/60%60); var hour =Math.floor(distancetime/1000/60/60%24); if(ms<100){ ms = "0"+ ms; } if(sec<10){ sec = "0"+ sec; } if(min<10){ min = "0"+ min; } if(hour<10){ hour = "0"+ hour; } return hour + ":" +min + ":" +sec + ":" +ms; }else{
                  //若否,就是已经到截止时间了
    return "已截止!" } } }(); addTimer("timer1",1451923200);//1月5日00点,unix时间戳自己去百度一下,就有的 addTimer("timer2",1451926800);//1月5日01点 addTimer("timer3",1451930400);//1月5日02点 addTimer("timer4",1452020400);//1月6日03点 </script> </body> </html>

    -------------------------------------------------------------

    如何使用这个函数?

    addTimer("#id",时间戳int);

     

    PS:

    其实这个函数有一个小小的问题:就是并不会显示截止天数;因为老板表示我们的倒计时时间最多也就几个小时,所以在判断倒计时的小时和天数上,我也就懒得写那么多了。所以如果传入的时间戳距今超过了1天。那么你会看到如此结果:02:11:32:874~~只剩2个小时了!明显不对是不是?

      so,有2个方案这里:

      方法1:把var hour =Math.floor(distancetime/1000/60/60%24);改成var hour =Math.floor(distancetime/1000/60/60);

        如果截止时间距今超出一天了,小时位置会显示大于24的数字;比如:36:45:22:888

      方法2:你自己再写一个计算天数的变量;

    (其实我觉得毫秒倒计时完全没有必要,精确到秒就够了嘛~毫秒这么快,简直看得我眼瞎!)

  • 相关阅读:
    使用js获取表单元素的值
    分页问题
    空值转换问题
    MySQL数据库操作基础
    二叉树DFS遍历递归和非递归做法
    BFS经典算法
    stack & queue及经典例题
    Recursion & Binary search
    Leetcode之SpiralMatrix(I,II)
    Leetcode之贪心算法
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/5100814.html
Copyright © 2011-2022 走看看