倒计时功能

最新推荐文章于 2023-06-19 13:49:52 发布

艳艳啊

最新推荐文章于 2023-06-19 13:49:52 发布

阅读量103

点赞数

分类专栏：工具专栏文章标签： html javascript jquery html5

本文链接：https://blog.csdn.net/weixin_45132713/article/details/115167638

版权

工具专栏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .time_con {
            width: 300px;
            height: 100px;
            background: #fff;
            white-space: nowrap;
            line-height: 100px;
        }

        .time_con span {
            width: 50px;
            height: 50px;
            background: #fed359;
            color: #3a96dd;
            display: inline-block;
            margin-bottom: -20px;
            overflow: hidden;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="time_con">
        距离2021年10月1日还有<span class="day"></span>日<span class="hour"></span>时<span class="min"></span>分<span
            class="sec"></span>秒
    </div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    /* 
    name 时间 2021/9/30 23:59:59
    call 回调
    */
    cdown = function (name, call) {
        var timer = null,
            now = new Date(),
            obj = {},
            time1 = now.getTime() / 1000,
            // cdtime = (new Date(name).toLocaleString()).replace('下午' || '上午', '') 可以自己整理页面现实的目标时间
            time2 = (new Date(name)).getTime() / 1000,
            diff = time2 - time1;

        if (diff == 0) {
            clearInterval(timer);
            $('.time_con').find('.day').html("00").end().find('.hour').html("00").end().find('.min').html("00").end().find('.sec').html("00");
        }
        timer = setInterval(function (index, item) {
            time1 = (new Date()).getTime() / 1000;
            diff = time2 - time1;
            diff--;
            obj.d = parseInt(diff / 60 / 60 / 24);//天
            obj.h = parseInt(diff / 60 / 60 % 24);//小时
            obj.m = parseInt(diff / 60 % 60);//小时
            obj.s = parseInt(diff % 60);//秒
            Object.keys(obj).forEach(function (tx) {
                obj[tx] = obj[tx] < 10 ? '0' + obj[tx] : obj[tx];
            })
            $('.time_con').find('.day').html(obj.d).end().find('.hour').html(obj.h).end().find('.min').html(obj.m).end().find('.sec').html(obj.s);

            if (diff == 0) {
                clearInterval(timer);
                $('.time_con').find('.day').html("00").end().find('.hour').html("00").end().find('.min').html("00").end().find('.sec').html("00");
            }

            call && call(obj)
        }, 1000)
    }

    /* 调用 */
    cdown('2021/9/30 23:59:59', function (obj) {
    });
</script>

</html>

艳艳啊

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计
复制链接

扫一扫

专栏目录