• 原生js实现倒计时


    html代码:

    <div class="box">距离下班还有:<span>01:01:30</span></div>

    css代码:

    *{
    margin: 0;
    padding: 0;
    }
    .box{
    600px;
    height: 40px;
    margin: 30px auto;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    font-weight: bold;
    border: 2px dashed darkred;
    background: lightcyan;
    }
    .box span{
    padding-left: 10px;
    color: darkblue;
    }
    js代码:
    var span =
    document.getElementsByClassName('box')[0].getElementsByTagName('span')[0];
    var timer = window.setInterval(record,1000);
    function record(){
    var curDate = new Date();//获取当前的时间
    var targetDate = new Date('2016/09/22 18:14:00'); //目标时间,先转化成时间格式的对象才能使用getTime()方法
    var curDate1970 = curDate.getTime(); //当前时间距离1970的ms数
    var targetDate1970 = targetDate.getTime(); //目标距离1970的ms
    var time = targetDate1970 - curDate1970; //时间差
    //换算单位把time换算成h/m/s
    //先换算成小时
    var h = Math.floor( time/(1000*60*60) ); // 向下取整
    // 换算分钟 => 需要把h小时所占用的ms数减去,然后再换算分钟
    var m = Math.floor( (time - h*60*60*1000)/(1000*60) );
    // 换算s => 把小时和分钟所占用的ms数都减去,然后再换算成s
    var s = Math.floor( (time - h*60*60*1000 - m*60*1000)/1000 );
    if(h + m + s <= 0 ){
    window.clearInterval(timer);
    span.innerHTML = "00:00:00"
    return;
    }
    span.innerHTML = addZero(h) + ":" + addZero(m) + ":" + addZero(s);
    }
    function addZero(n){ //给不足10的数前面添加一个0
    return n < 10 ? '0' + n : n;
    }
    //date.getTime(); //当前的这个date时间距离1970年1月1日 8点的毫秒数
    注:var date2 = new Date('2016/09/24 17:00:00');
    console.log(date2);
    //如果在new的过程中括号内添加了一个时间格式的字符串,那么就是把这个字符串转化成时间对象.然后就可以使用getFullYear()等方法了
    date2.getFullYear();
  • 相关阅读:
    CSS3---用户界面
    CSS3---媒体查询与响应式布局
    HDU 5285 wyh2000 and pupil
    POJ 2488 A Knight's Journey
    POJ 1067 取石子游戏
    POJ 2777 Count Color
    POJ 3259 Wormholes
    Project Euler 26 Reciprocal cycles
    POJ 2104 K-th Number
    POJ 1013 Counterfeit Dollar
  • 原文地址:https://www.cnblogs.com/jj-z/p/8081815.html
Copyright © 2020-2023  润新知