用js实现倒计时功能

最新推荐文章于 2023-02-17 17:46:03 发布

aixing0262

最新推荐文章于 2023-02-17 17:46:03 发布

阅读量190

点赞数

原文链接：http://www.cnblogs.com/juna3066/p/10633417.html

版权

源码如下：

原理很简单，看注释吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jun倒计时</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p{
        font-size: 66px;
        text-align: center;
    }
    p span{
        color: red;
        background:blanchedalmond;
    }
    p span .time{
        color: black;
        background: white;
    }
    body{
        padding-top: 200px;
    }
</style>
<body>
    <p>距离2019年4月7号</p>
    <p>
        <span>
            <!--这里面内容有js添加-->
        </span>
    </p>
    <script>

        function formatNum(time) {
            return time < 10 ? "0" + time : "" + time;
        }

        <!--函数作用：获取目标时间与现在时间的差，把结果处理后，动态填充到body中-->
        function getCountdownDate() {

            var oDate = new Date();
            var oTime = oDate.getTime();    //现在距离1970年的毫秒数

            var planDate = new Date("2019/4/7 00:00:00");
            var planTime = planDate.getTime();

            //var resultSecond = (planTime - oTime) / 1000;   //毫秒变秒,这里结果不是整数
            var resultSecond = Math.floor((planTime - oTime) / 1000);   //毫秒变秒

            var day = Math.floor(resultSecond / 86400);  //60*60*24=86400秒，即一天的总秒数
            resultSecond %=  86400;     //取余，得到余下的不到一天的秒数

            var hour = Math.floor(resultSecond / 3600);  //60*60=3600秒，一个小时的总秒数
            resultSecond %=  3600;     //取余，得到余下的不到一个小时的秒数

            var minute = Math.floor(resultSecond / 60);     //... ...
            var second = resultSecond % 60 ;      //取余，得到余下的不到一分钟的秒数

            var str = formatNum(day) + "<span class ='time'>天</span>" +
                formatNum(hour) + "<span class ='time'>时</span>" +
                formatNum(minute) + "<span class ='time'>分</span>" +
                formatNum(second) + "<span class ='time'>秒</span>";

            var targetSpan = document.getElementsByTagName("span")[0]; //获取填充的位置
            targetSpan.innerHTML = str;   //填充
        }

        getCountdownDate();
        setInterval(getCountdownDate,1000);
    </script>
</body>
</html>

浏览器结果：

转载于:https://www.cnblogs.com/juna3066/p/10633417.html

aixing0262

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js实现倒计时功能

源码如下：原理很简单，看注释吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jun倒计时</title></head><style> *{...
复制链接

扫一扫