Html 实现倒计时

最新推荐文章于 2024-02-29 16:32:05 发布

阳光的男夹克

最新推荐文章于 2024-02-29 16:32:05 发布

阅读量1w

点赞数 7

分类专栏： Javascript 文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_44640323/article/details/122425095

版权

Javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title倒计时title>
        <style>
            input {
                width: 40px;
                height: 20px;
            }
            #remainTime{
                background-color: yellow;
                margin-top: 30px;
                font-size: 40px;
                text-align: center;

            }
            #remainTime span {
                color: red;
                font-weight: bold;
                margin-right: 10px;
            }
        </style>
</head>
<body>
    <div id="remainTime">
        倒计时：
        <span id="one"></span>天
        <span id="two"></span>时
        <span id="three"></span>分
        <span id="four"></span>秒
    </div>
</body>
<script>
        (function show() {      
            //1.设置目的时间
            var oYear = 2022
            var oMonth = 0
            var oDay = 28
            var oHour = 0
            var oMinute = 0
            var oSecond = 0
            var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);
            // console.log(dateFormat(funtureDate))
            //2.设置定时器
            setInterval(function () {
                //3.获取现在的时间
                var presentDate = new Date();
                //4.获取时间戳
                var funtureTime = funtureDate.getTime();
                var presenTime = presentDate.getTime();
                //5.获取剩余的时间戳
                var allTime = funtureTime - presenTime;          
                //6.把毫秒转换为秒
                var allSecond = parseInt(allTime / 1000);
                //7.获取剩余多少天
                var day = size(parseInt(allSecond / 3600 / 24));
                //8.获取剩余多少小时
                var hour = size(parseInt(allSecond / 3600 % 24));
                //9.获取剩余多少分钟
                var minute = size(parseInt(allSecond / 60 % 60));
                //10.获取剩余多少秒
                var second = size(parseInt(allSecond % 60));
                //11.注入：
                document.getElementById('one').innerHTML = day;
                document.getElementById('two').innerHTML = hour;
                document.getElementById('three').innerHTML = minute;
                document.getElementById('four').innerHTML = second;
            }, 1000);
            //如果数>=10,则在前面补0
            function size(num) {
                return num < 10 & num >= 0 ? '0' + num : num;
            }  
        })()
        //格式化日期格式 2
        function dateFormat(data){
            var date = new Date(data);
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            return YY + MM + DD;
        }
  </script>
</html>

阳光的男夹克

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
Html 实现倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title倒计时title> <style> input { width: 40px; height: 20px; } #remainTime{
复制链接

扫一扫