仿京东倒计时效果

最新推荐文章于 2023-04-08 13:34:12 发布

软件小邓

最新推荐文章于 2023-04-08 13:34:12 发布

阅读量286

点赞数 1

分类专栏：前端倒计时效果文章标签： html css javascript

本文链接：https://blog.csdn.net/ydy2002/article/details/119299472

版权

前端同时被 2 个专栏收录

5 篇文章 2 订阅

订阅专栏

倒计时效果

1 篇文章 0 订阅

订阅专栏

仿京东倒计时效果

效果图：

<!DOCTYPE html>
<html>

<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>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .wrap {
        margin: 35px auto;
        width: 190px;
        height: 260px;
    }

    a {
        position: relative;
        float: left;
        display: block;
        width: 190px;
        height: 260px;
        background: url(bg.png);
        text-decoration: none;
        color: #fff;
    }

    a .countdown-title {
        margin-top: 31px;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
    }

    a .countdown-desc {
        margin-top: 90px;
        font-size: 14px;
        text-align: center;
    }

    a .timmer {
        display: block;
        width: 130px;
        height: 30px;
        margin: 10px auto 0;
    }

    a .timmer .hour,
    .minute,
    .secoen {
        position: relative;
        float: left;
        width: 30px;
        height: 30px;
        text-align: center;
        background-color: #2f3430;
        margin-right: 20px;
        color: white;
        font-size: 20px;
    }

    a .secoen {
        margin-right: 0;
    }

    a .hour::after {
        content: ':';
        display: block;
        position: absolute;
        right: -20px;
        font-weight: bolder;
        font-size: 18px;
        width: 20px;
        height: 100%;
        top: 0;
    }

    a .minute::after {
        content: ':';
        display: block;
        position: absolute;
        right: -20px;
        font-weight: bolder;
        font-size: 18px;
        width: 20px;
        height: 100%;
        top: 0;
    }
</style>

<body>
    <div class="wrap">
        <a href="Javascript:;">
            <div class="countdown-title">京东秒杀</div>
            <div class="countdown-desc">
                <strong>16:00</strong>
                点场 距结束
            </div>
            <span class="timmer">
                <span class="hour">00</span>
                <span class="minute">00</span>
                <span class="secoen">00</span>
            </span>
        </a>
    </div>

    <script>
        // 获取元素
        var hour = document.querySelector('.hour')//小时
        var minute = document.querySelector('.minute') //分钟
        var secoen = document.querySelector('.secoen')//秒数
        var inputTime = +new Date('2021-8-30 21:00:00')
        contDown();

        // 定时器
        var timer = setInterval(function () {
            contDown()
        }, 1000)


        function contDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            secoen.innerHTML = s;
        }
    </script>
</body>

</html>