zoukankan      html  css  js  c++  java
  • 日期格式之——剩余时间(天,小时,分,秒)的计算方法

    demo的css样式如下:

    * { margin: 0;padding: 0;}
        #timer {
            font-size: 0px;color: red;font-weight: bolder;
            /*对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服它有三个属性值:
            none: 对低像素的文本比较好;subpixel-antialiased:默认值;antialiased:抗锯齿很好 */
            -webkit-font-smoothing: antialiased;
        }
        span {font-size: 12px;}
        /*将span定宽,将重绘最小化*/
        #days,#hours,#minutes,#seconds {
            display: inline-block;
            width: 14px;
            text-align: center;
        }

    demo的html如下:

    <div id="timer">
             <span id="days"></span><span></span>
             <span id="hours"></span><span>小时</span>
             <span id="minutes"></span><span></span>
             <span id="seconds"></span><span></span>
         </div>

    demo的js如下:

    var leftTime;
     function leftTimer(year,month,day,hour,minute,second){ 
      leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数 
      var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
      var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
      var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
      var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
      return {
        days: checkTime(days),
        hours: checkTime(hours),
        minutes: checkTime(minutes),
        seconds: checkTime(seconds) 
      }
    }
    
    var timer = setInterval(function(){ 
         var t = leftTimer(2017,11,21,12,0,0);
        if (!leftTime) clearInterval(timer);
         document.getElementById("days").innerHTML = t.days;
         document.getElementById("hours").innerHTML = t.hours;
         document.getElementById("minutes").innerHTML = t.minutes;
         document.getElementById("seconds").innerHTML = t.seconds;
     },1000);
     
    function checkTime(i){ //将0-9的数字前面加上0,例1变为01 
      if(i<10) i = "0" + i; 
      return i; 
    } 
  • 相关阅读:
    java8新特性学习:stream与lambda
    Storm实践(一):基础知识
    Google Protocol Buffer入门
    zeromq实践
    maven实践--你所需要了解的maven
    springcloud实践(一)服务发现:Eureka
    职责链模式(chain of responsibility Pattern)
    代理模式 (Proxy Pattern)
    享元模式(Flyweight Pattern)
    外观模式(Facade Pattern)
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/7865449.html
Copyright © 2011-2022 走看看