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:你自己再写一个计算天数的变量;

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

  • 相关阅读:
    买房的贷款时间是否是越长越好?https://www.zhihu.com/question/20842791
    asp.net cookie and session
    leelazero and google colab
    download file by python in google colab
    physical processor, core, logical processor
    通过powershell操作eventlog
    openxml in sql server
    get the page name from url
    How to Execute Page_Load() in Page's Base Class?
    Difference between HttpContext.Request and Request
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/5100814.html
Copyright © 2011-2022 走看看