网页小技巧之倒计时

最新推荐文章于 2023-11-29 11:22:01 发布

枫雨血痕

最新推荐文章于 2023-11-29 11:22:01 发布

阅读量512

点赞数

分类专栏： javascript 前端文章标签：定时器 javaScript 小技巧

本文链接：https://blog.csdn.net/lyxuefeng/article/details/81176751

版权

前端同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

javascript

40 篇文章 1 订阅

订阅专栏

思路：利用日期函数Date(),分别得到终点时间和当前时间距离1970.1.1的毫秒数，然后相减，得到相差毫秒数
然后利用相差毫秒数去计算月天时分秒。然后使用定时器设定每秒钟执行1次上述行为。(注意使用parseInt()取整)
关键知识：日期函数Date(),定时器setInterval()
具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style type="text/css">
        #box {
            width:400px;
            height: 200px;
            line-height: 200px;
            margin: 100px auto;
            color:red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    setInterval(fun,1000);
    function fun(){
        var date = new Date();//得到当前时间
        // console.log(date);
        var endTime = new Date("2018/9/1");//设定终点时间
        // console.log(endTime);
        var ms = endTime.getTime()-date.getTime();//得到相差毫秒数
        // console.log(ms);
        var m = parseInt(ms/(1000*60*60*24*30)%12);//得到距离月份并取整，此处默认每月30天
        var d = parseInt(ms/(1000*60*60*24)%30);//得到天数
        var h = parseInt(ms/(1000*60*60)%24);//得到小时数
        var min = parseInt(ms/(1000*60)%60);//得到分钟数
        var s = parseInt(ms/1000%60);//得到秒数
        m<10 ? m='0'+m : m;//如果月份数小于10,显示为0x,大于或等于则为原值
        d<10 ? d='0'+d : d;
        h<10 ? h='0'+h : h;
        min<10 ? min='0'+min : min;
        s<10 ? s='0'+s : s;
        box.innerHTML = "距离9月1号开学还有 "+m+"月"+d+"天"+h+"小时"+min+"分"+s+"秒";
    }
    
</script>
</html>

具体效果可见：倒计时