zoukankan      html  css  js  c++  java
  • 时间倒计时

     var startTime = $("#sendTime #time").html().split("-");
                    var stopTime = $("#stopTime #time").html().split("-");
                    var start0 = startTime[0], start1 = startTime[1], start2 = startTime[2];
                    var stop0 = stopTime[0], stop1 = stopTime[1], stop2 = parseInt(stopTime[2]) + 1;
                    var day1 = new Date(start0, start1 - 1, start2).getTime();
                    var day2 = new Date(stop0, stop1 - 1, stop2).getTime();
                    var today = new Date();
                    var ms, dt;
                    ms = day2 - today;
                    dt = Math.ceil(ms / 1000 / 3600 / 24);
                    if (ms > 0) {
                        $("#last").html("(剩余约" + dt + "天)");
                    } else if (ms == 0) {
                        $("#last").html("(剩余约" + 1 + "天)");
                    } else {
                        $("#last").html("(已过期)");
                    }
    View Code

     一个封装好的时间倒计时,两个时间戳可以做

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>倒计时</title>
    </head>
    <body>
    <script>
    function countDown( maxtime,fn )
    {    
       var timer = setInterval(function()
       {
        if(maxtime>=0){ 
           d=parseInt(maxtime/3600/24);
           h=parseInt((maxtime/3600)%24);
           minutes=parseInt((maxtime/60)%60);
           seconds=parseInt(maxtime%60);
        
        //minutes = Math.floor(maxtime/60);   
        //seconds = Math.floor(maxtime%60);   
        msg = "距离结束还有"+d+"天"+h+"小时"+minutes+"分"+seconds+"秒";   
        fn(msg);
        if(maxtime == 5*60)
           alert('注意,还有5分钟!');   
          --maxtime;   
      }   
       else{   
       clearInterval( timer );
       fn("时间到,结束!");  
      }   
     }, 1000);
    }
    </script>
    
    
    
    <div id="timer1" style="color:red"></div>
    
    
    
    <script>
     countDown( 6000,function( msg ) //6000服务器时间差 单位为妙
    {
      document.getElementById('timer1').innerHTML = msg;
     });
    </script>
    
    
    
    
    <div id="timer2" style="color:red"></div>
    <script>
     countDown( 6000,function( msg )
     {
      document.getElementById('timer2').innerHTML = msg;
     });
    </script>
    <div id="timer3" style="color:red"></div>
    
    
    
    
    
    
    <script>
    
    countDown( 600000,function( msg )
     {
      document.getElementById('timer2').innerHTML = msg;
     });
     
     countDown(20,function( msg )
     {
      document.getElementById('timer3').innerHTML = msg;
     })
     </script>
    </body>
    </html>

     关于时间倒计时, 用法原理是这样的。  选把时间换算, 再用定时器每次 获取计算就行了。

    看下面的例子。

    <!doctype html>
    <html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
     <meta http-equiv="Cache-Control" content="max-age=0">
     <meta name="apple-touch-fullscreen" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection" />  
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>倒计时</title>
    </head>
    <body>
        
      <div id="time" residue_time = "1473315993" >000</div>
        
    </body>
    </html>
    <script type="text/javascript" src="jquery.1.9.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
        time.init();
    })
    
    var time = {    
        init : function(){
            this.timer= null;
            this.bindEvent();
           
        },
        bindEvent:function(){
            var _this = this;
            var ms = parseInt($("#time").attr("residue_time"));
            $("#time").text(_this.convertMS(ms));
            this.timer = setInterval(function(){
                var ms = parseInt($("#time").attr("residue_time"));
                var showtimes = _this.convertMS(ms);
                $("#time").text(showtimes).attr("residue_time", ms - 1000);
            
            },1000)
        },
    // 转换毫秒
        convertMS:function(ms) {
            if (ms < 1000)            
                return "价格已过期";
            var hours = parseInt(ms / 1000 / 60 / 60 % 24);
            /*if (hours > 0)
                return 0;*/
            var minites = parseInt(ms / 1000 / 60 % 60);
            var seconds = parseInt(ms / 1000 % 60);
            minites = minites < 10 ? "0" + minites : minites;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            return "剩余" + minites + "" + seconds + ""
        },
        // 转换小时24小时制返回小时
       convertMS24 : function(ms) {
            if (ms < 1000)
                return 0;
            var dt1 = new Date(Number(ms));
            var day =    dt1.getDate();
            var hours = dt1.getHours();
            var minites = dt1.getMinutes();
            var seconds = dt1.getSeconds();        
            minites = minites < 10 ? "0" + minites : minites;
            seconds = seconds < 10 ? "0" + seconds : seconds;        
            if (hours > 0){
                return  hours+"到点了";
            }            
        },    
    }
    </script>
  • 相关阅读:
    数组对象遍历新增属性
    watch监听数据的改变
    同一个数组查重
    SpringCloud搭建(二) 支付模块搭建
    SpringCloud搭建(一) 聚合父工程搭建
    线程池
    同步容器
    容器
    JVM学习
    线程---ThreadLocal
  • 原文地址:https://www.cnblogs.com/yjhua/p/4933884.html
Copyright © 2011-2022 走看看