0
点赞
收藏
分享

微信扫一扫

【倒计时】用JS写出京东倒计时效果

kmoon_b426 2022-04-18 阅读 206

1.倒计时效果

这是一段简单的倒计时代码,倒计时效果将基于此代码进行修改

<script>
        function getDaojishi(time) {
            var date = +new Date();//返回当前时间总毫秒数
            var now = +new Date(time);//返回用户输入时间总毫秒数
            var times = (now - date) / 1000;//剩余时间总秒数
            var t = parseInt(times / 60 / 60 / 24);//天
            t = t < 10 ? '0' + t : t;
            var h = parseInt(times / 60 / 60 % 24);//小时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分钟
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return t + '天' + h + '小时' + m + '分钟' + s + '秒'
        }
        var shijian = getDaojishi('2022-7-1 00:00:00');
        console.log(shijian);
        var dates = new Date();
        console.log(dates);
    </script>

2、京东倒计时效果

这是按照京东的倒计时效果进行的解析,代码可能会有点区别,大致原理如此:

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

        .box {
            position: relative;
            margin: 100px auto;
            width: 240px;
            height: 340px;
            padding-top: 51px;
            background-color: red;
            text-align: center;
            box-sizing: border-box;
        }

        .p1 {
            width: 240px;
            height: 70px;
            line-height: 70px;
            color: aliceblue;
            font-size: 40px;
        }

        .p2 {
            width: 240px;
            height: 40px;
            line-height: 40px;
            color: #ccc;
            font-size: 23px;
        }

        .p3 {
            width: 240px;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: #fff;
        }

        .p4 {
            width: 240px;
            height: 45px;
            line-height: 45px;
            font-size: 18px;
            color: #fff;
        }

        .times {
            width: 240px;
            height: 74px;
            text-align: center;
        }

        span {
            display: inline-block;
            margin-top: 12px;
            width: 50px;
            height: 50px;
            background-color: #000;
            margin-right: 5px;
            font-size: 30px;
            color: #fff;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="'txt">
            <div class="p1">京东秒杀</div>
            <div class="p2">FLASH DEALS</div>
            <div class="p3">肖友无敌</div>
            <div class="p4">本场距离结束还剩</div>
        </div>
        <div class="times">
            <span class="hours">1</span>
            <span class="min">2</span>
            <span class="second">3</span>
        </div>
    </div>
    <script>
        var hours = document.querySelector('.hours')
        var min = document.querySelector('.min')
        var second = document.querySelector('.second')
        var now = +new Date('2022-7-1 00:00:00'); //返回用户输入时间总毫秒数
        getDaojishi(); // 我们先调用一次这个函数,防止第一次刷新页面有空白
        //  开启定时器
        setInterval(getDaojishi, 1000)

        function getDaojishi(time) {
            var date = +new Date(); //返回当前时间总毫秒数
            var times = (now - date) / 1000; //剩余时间总秒数
            var t = parseInt(times / 60 / 60 / 24); //天
            t = t < 10 ? '0' + t : t;
            var h = parseInt(times / 60 / 60 % 24); //小时
            h = h < 10 ? '0' + h : h;
            hours.innerHTML = h;
            var m = parseInt(times / 60 % 60); //分钟
            m = m < 10 ? '0' + m : m;
            min.innerHTML = m;
            var s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
            // return t + '天' + h + '小时' + m + '分钟' + s + '秒'
        }
    </script>
</body>

</html>

以上便是全部代码,原理是基于最开始的倒计时JS代码,然后用HTML和CSS加以修饰和调用!

如果有错误或者有能优化的地方,欢迎提出!

举报

相关推荐

0 条评论