2020-1024---商品倒计时

最新推荐文章于 2024-09-09 15:11:55 发布

易de

最新推荐文章于 2024-09-09 15:11:55 发布

阅读量78

点赞数

分类专栏： H5 文章标签： 1024程序员节

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/109250543

版权

H5 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

效果
三个商品不同的倒计时
在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stoptime</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="img_box">
        <ul>
            <li><img src="./img/img1.png" alt=""></li>
            <li><img src="./img/img2.png" alt=""></li>
            <li><img src="./img/img3.png" alt=""></li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li class="bg">
                <span>
                    ￥<b>2199</b>
                </span>
                <ul>
                    <li class="time">￥3298.00</li>
                    <li class="time t1"></li>
                </ul>
            </li>
            <li class="bg">
                <span>
                    ￥<b>3499</b>
                </span>
                <ul>
                    <li class="time">￥3499.00</li>
                    <li class="time t2"></li>
                </ul>
            </li>
            <li class="bg">
                <span>
                    ￥<b>38.5</b>
                </span>
                <ul>
                    <li class="time">￥160.00</li>
                    <li class="time t3"></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

css代码

ul li{
    width: 400px;
    border: 1px solid black;
    list-style: none;
    color: white;
    float: left;
}
img{
    display:block;
    margin: 0 auto;
}
.box .bg{
    width: 400px;
    height: 55px;
    background: url('./img/logo.png') no-repeat 4px 2px;
}
.box ul li span{
    float: left;
    font-size: 20px;
    width: 100px;
}
.box ul li span b{
    font-size: 46px;
    font-weight: 100;
}
.box ul li .time{
    float: right;
    width: 280px;
    margin: 4px 0;
    border: none;
    font-size: 14px;
}
.box ul li .time:first-child{
    text-decoration: line-through;
}

jq代码

function timer(selector,time1){
    setInterval(() => {
        var now_date = new Date();
        var now_time = now_date.getTime();
        var new_data = new Date(time1);
        var new_time = new_data.getTime();
        var time = new_time - now_time;
        var day = Math.floor(time / 24 / 60 / 60 / 1000);
        var hour = Math.floor((time - (day * 24 * 60 *60 * 1000)) / (60 * 60 * 1000));
        var min = Math.floor((time - (day * 24 * 60 * 60 * 1000 - hour * 60 * 60 * 1000)) / (60 * 1000)) 
        var sed = Math.floor((time / 1000 ) % 60);
        $(selector).text('距离结束 : ' + double(day) + '天' + double(hour) + '时' + double(min) + '分' + double(sed) + '秒');
    }, 0)
}

function double(t){
    if(parseInt(t / 10) < 1){
        t = '0' + t;
        return t;
    }else{
        return t;
    }
}
 
timer('.bg .t1','2020-10-28,12:00:00');
timer('.bg .t2','2020-11-28,12:00:00');
timer('.bg .t3','2020-12-28,12:00:00');