zoukankan      html  css  js  c++  java
  • 原生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();
  • 相关阅读:
    Mysql 常用函数(34)- week 函数
    Mysql 常用函数(33)- dayofmonth 函数
    Mysql 常用函数(32)- dayofyear 函数
    Mysql 常用函数(31)- dayofweek 函数
    Mysql 常用函数(30)- month 函数
    Mysql 常用函数(29)- sysdate 函数
    Mysql 常用函数(28)- datediff 函数
    Mysql 常用函数(27)- now 函数
    Azure Messaging-ServiceBus Messaging消息队列技术系列1-基本概念和架构
    Oracle 12c In Memory Option初探
  • 原文地址:https://www.cnblogs.com/jj-z/p/8081815.html
Copyright © 2011-2022 走看看