原生js倒计时效果

sck_King

于 2019-01-22 10:55:49 发布

阅读量309

点赞数 1

分类专栏：程序猿文章标签： js 原生js

本文链接：https://blog.csdn.net/weixin_43708754/article/details/86590979

版权

程序猿专栏收录该内容

28 篇文章 0 订阅

订阅专栏

原生js倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
<h1>
    距离放假还剩下
    <span>天</span>
    <span>时</span>
    <span>分钟</span>
    <span>秒</span>
    <span style="color: red"></span>
</h1>


</body>
</html>
<script>
    // 抓元素
    var span = document.getElementsByTagName('span');

    setInterval(function () {
        //现在的时间
        var now =new Date().getTime();
        //你想倒计时的时间
        var  ywant = new Date(2019,0,26,15,30).getTime();
        //获取到要倒计时的毫秒数,相差的时间
        var diff=ywant-now;
        //获取到天数
        var  days = parseInt(diff/(60*1000*60*24));
        span[0].innerHTML=days+"天";
        //获取剩余一天的毫秒数
        var diff = diff%(60*1000*60*24);
        //微秒数/一小时微秒数 得到小时
        hour =parseInt(diff/(60*60*1000));
        span[1].innerHTML=hour+"小时";
        //获取剩余一小时的毫秒数
         diff =diff%(60*1000*60);
        //剩余一小时的毫秒数/每分钟 = 分钟
        var minute =parseInt(diff/(60*1000));
        //赋值到html
        span[2].innerHTML=minute+"分钟"
        //获取剩余一分钟的毫秒数
        diff = diff%(60*1000);
        //剩余一分钟的毫秒数/每毫秒 = 秒数
        var second = parseInt(diff/1000);
        //赋值到html
        span[3].innerHTML=second+"秒"
        //获取毫秒
        diff = diff%1000;
        //直接赋值到html
        span[4].innerHTML=diff;
    },1)




</script>