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; 
    } 
  • 相关阅读:
    The jQuery UI CSS Framework(中文说明)
    锁定表头和固定列(Fixed table head and columns)
    html5学习二(canvas)
    浅析深究什么是SOA
    页面加载完毕后执行js函数的方法
    Spring AOP详解(转)
    db2move详解
    DB2 命令总汇
    Ubuntu下Apache的配置
    maven打包的一些问题
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/7865449.html
Copyright © 2011-2022 走看看