商城抢购倒计时

原创于 2020-04-24 12:12:51 发布 · 242 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

前端专栏收录该内容

10 篇文章

订阅专栏

需求

到没到设定的时间显示

开始

结束

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
    <script src="../jquery-3.5.0.js"></script>
</head>
<body>
    <div class="wrapper">
        <h3>小米商城</h3>
        <div class="start"></div>
        <img src="1.jfif" alt="">
        <div class="tip">距离结束还有</div>
        <div class="countTime">
            <span class="hour"></span>
            <span>:</span>
            <span class="minute"></span>
            <span>:</span>
            <span class="second"></span>
        </div>
    </div>
</body>
</html>
<script>
    function DataTime(startTime , continueTime) {   //startTime开始时间的场次 ， continueTime持续的时间
        this.startTime = startTime;
        this.continueTime = continueTime;
    }
    function getTime() {
        var result = {
            //startTimeHour,startTimeMinute,tip ,displayTime[hour,minuete,second]
        };  //先创建一个空对象
        function judge(e) {    //判断时间是否是一位数，如3  改成03
            if(e < 10) {
                e = '0' + e;
            } 
            return  e;
        }
        var dataTime = new  DataTime(1587699900000, 14400000); //1587699900000  ,
        var nowTime = new Date().getTime();

        //获取开场时间
        var startT = dataTime.startTime;
        var startC = dataTime.continueTime;
        result.startTimeHour = function () {    //开始时间的hour   总的/1000得到多少秒     然后/3600得到是一共是多少个小时    有小数的要向下取整     然后再%24后是，一天24小时，到最后一天到底剩了几个小时，因为时间是从1970年8点开始算的，所以要+8  最后%24防止+8后溢出
            var hour = (Math.floor(startT  / 1000 /3600) % 24 + 8) % 24;  //            
            hour = judge(hour);
            return hour;
        }
        result.startTimeMinute = function () {         //开始时间的minute
            var minute = Math.floor(startT / 1000 / 60) % 60; //1000也是先得到多少秒 ，/60得到有多少分钟  ，在%60是剩余多少分钟
            minute = judge(minute); 
            return minute;
        }
        result.tip = function() {
            if(nowTime > startT + startC) {
                return '已经结束';
            } else if(nowTime < startT){
                return '距离开始还有';
            } else {
                return '已经开始';
            }
        }
        result.displayTime = function() {
            var box = [];
            if(nowTime > startT) {
                var differece = nowTime - startT;
                box[0] = Math.floor(differece  / 1000 /3600) % 24;
                box[0] = judge( box[0]);
                box[1] = Math.floor(differece / 1000 / 60) % 60;
                box[1] = judge( box[1]);
                box[2] = Math.floor(differece / 1000) % 60;
                box[2] = judge( box[2]);
            } else {
                var differece = startT - nowTime;
                box[0] = Math.floor(differece  / 1000 /3600) % 24;
                box[0] = judge( box[0]);
                box[1] = Math.floor(differece / 1000 / 60) % 60;
                box[1] = judge( box[1]);
                box[2] = Math.floor(differece / 1000) % 60;
                box[2] = judge( box[2]);
            }
            return box;
        }
        return result;
    }
    
 
        setInterval(function(){
            var final = getTime();
            $('.start').text(final.startTimeHour() + ':' + final.startTimeMinute() +'场');
            $('.tip').text(final.tip());
            $('.hour').text(final.displayTime()[0])
            $('.minute').text(final.displayTime()[1]);
            $('.second').text(final.displayTime()[2]);
        },1/60)
</script>

css样式

* {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 200px;
    height: 280px;
    background-color: turquoise;
    margin: 50px auto;
    padding: 10px;
    text-align: center;
}
.wrapper .start {
    padding: 10px 0;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
}
.wrapper h3 {
    border-bottom: 2px solid red;
    height: 40px;
    line-height: 40px;
}
.wrapper img {
    padding: 5px 0  0;
    width: 150px;
    height: 100px;
}
.wrapper .tip {
    margin: 10px 0;
}
.hour , .second , .minute {
    display: inline-block;
    width: 35px;
    height: 25px;
    line-height: 25px;
    font-size: 24px;
    
}
.wrapper .countTime span:nth-child(odd) {
    background-color: violet;
    color: #fff;
    font-weight: 600;
}