JS实现京东倒计时(完整代码)

JS实现京东倒计时(完整代码)一.获取图片二.css实现外观这里比较简单，就不细说了三.JS实现倒计时基本思路：1.首先使用Date()对象获取当前时间(时间戳)2.传递参数获取活动开始的时间，两次时间的单位都是秒3.两个时间相减可得到相距的时间4.通过计算得到天数，小时，分钟，秒钟5.使用setInterval(function(){},1000)函数每1秒调用一次倒计时函数(1000为毫秒)6

Gwarrior

8546人浏览 · 2021-05-23 21:35:31

Gwarrior · 2021-05-23 21:35:31 发布

JS实现京东秒杀倒计时(完整代码)

在这里插入图片描述

一.获取图片
在这里插入图片描述
二.css实现外观
这里比较简单，就不细说了

三.JS实现倒计时
基本思路：
1.首先使用Date()对象获取当前时间(时间戳)
2.传递参数获取活动开始的时间，两次时间的单位都是秒
3.两个时间相减可得到相距的时间
4.通过计算得到天数，小时，分钟，秒钟
5.使用setInterval(function(){},1000)函数每1秒调用一次倒计时函数(1000为毫秒)
6.调用倒计时函数

四.完整代码

<!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>
        .timeDown-box {
            position: relative;
            width: 200px;
            height: 270px;
            background: url(../秒杀.png);
        }
        .text1 {
            text-align: center;
            padding-top: 30px;
            font-size: 35px;
            font-weight: 1000;
            color: white;
        }
        .text2 {
            text-align: center;
            padding-top: 100px;
            font-size: 17px;
            font-weight: 1000;
            color: white;
        }
        #box1,#box2,#box3{
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: black;
            padding: 5px;
            margin-left: 18px;
            margin-top: 12px;
            color: white;
            text-align: center;
            font-size: 20px;
        }
        i {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: white;
            left: 48px;
        } 
    </style>
</head>
<body>
    <div class="timeDown-box">
        <div class="text1">京东秒杀</div>
        <div class="text2">18:00点场 距结束</div>
        <div class="timeDown" style="position: relative;">
            <span id="box1"></span>
            <span id="box2"></span>
            <span id="box3"></span>
            <i style="left: 65px;top: 36px;"></i>
            <i style="left: 65px;top: 23px;"></i>
            <i style="left: 127px;top: 36px;"></i>
            <i style="left: 127px;top: 23px;"></i>
        </div>
    </div>
    <div id = "timer"></div>
    <script>
        function timeDown(endTime) {
            var nowTime = new Date();  //开始时间
            var endTimer = new Date(endTime); //结束时间
            var totalS = parseInt((endTimer - nowTime) / 1000);  //总的秒数
            var Days = parseInt(totalS/(60*60*24)); //天数    
            var mol = totalS % (60*60*24); //取余数
            var Hours = parseInt(mol / (60*60));
            if(Hours < 10)
            {
                Hours = '0' + Hours;
            }
            mol = mol % (60*60);
            var Minutes = parseInt(mol / 60); //分钟
            if(Minutes < 10)
            {
                Minutes = '0' + Minutes;
            }
            var Seconds = mol % 60;
            if(Seconds < 10)
            {
                Seconds = '0' + Seconds;
            }
            var id = document.getElementById('timer');
            var span = document.querySelector('.timeDown').children; //获取span
            span[0].innerHTML = Hours;
            span[1].innerHTML = Minutes;
            span[2].innerHTML = Seconds;
            setInterval(function() {
                timeDown(endTime);
            },1000);
        }
        timeDown('2021-5-28 10:04:00');
    </script>
</body>
</html>