<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #time {
            color: darkseagreen;
            text-align: center;
            padding-top: 10px;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="time">

</div>
<script>
    window.onload = function () {
        //1、获取需要的标签
        var time = document.getElementById('time');
        //2、定义时间,获取到时间戳
        //将来的时间
        var newYearTime = new Date('2021/02/11 00:00:00');
        //3、开启定时器
        var timer = setInterval(function () {
            //现在的时间
            var nowTime = new Date();
            //4、获取时间戳
            var newYearDate = newYearTime.getTime();
            var nowDate = nowTime.getTime();
            //判断是否到期
            if (newYearDate - nowDate <= 0) {
                //替换文字
                time.innerText = '新年快乐~~~!!!!';
                //到期清理定时器
                clearInterval(timer);

            } else {
                //5、剩下的时间戳
                var aNextData = newYearDate - nowDate;
                //6、转换相关单位
                var newYearS = parseInt(aNextData / 1000); //毫秒转秒
                var newYearD = parseInt(newYearS / 3600 / 24); //天
                var newYearH = parseInt(newYearS / 3600 % 24); //小时
                var newYearM = parseInt(newYearS / 60 % 60); //分钟
                var newYearSS = newYearS % 60; //秒杀
                //拼接数据
                var showData = '距离2021年春节还有' + newYearD + '天' + newYearH + '小时' + newYearM + '分钟' + newYearSS + '秒';
                //替换数据
                time.innerText = showData;
            }

        }, 1000);

    }
</script>

</body>
</html>
最后修改:2020 年 08 月 12 日
如果觉得我的文章对你有用,请随意赞赏