码迷,mamicode.com
首页 > 其他好文 > 详细

日期格式之——剩余时间(天,小时,分,秒)的计算方法

时间:2017-11-20 13:00:04      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:splay   line   css   webkit   minutes   12px   get   ase   bsp   

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; 
} 

 

日期格式之——剩余时间(天,小时,分,秒)的计算方法

标签:splay   line   css   webkit   minutes   12px   get   ase   bsp   

原文地址:http://www.cnblogs.com/xuzhudong/p/7865449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!