H5拼单弹框,时间倒计时

版权声明：未经允许,请勿盗用 https://blog.csdn.net/qq_37916164/article/details/84066655

1:HTML代码

<a class="mui-pull-right seemore" onclick="show_more()">查看更多</a>

2:弹框内容

<div id="viewMore" class="view-more" style="display: none;">
        <div class="PingDanPopoverTitle" style="border-bottom: 1px solid #ccc;">
            <a>正在拼单</a>
            <a id="PingdanClose" class=" ">
                <img src="images/commodity/tc_x.png"  style="width: 46%;" onclick="close_more()">
            </a>
        </div>
        <div id="selectAllPindan" class="viewmorelist">
            <div class="">
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">
                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class="pingdanItemsName">@@:木子李</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime" >剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="assas">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:冬天的薛</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="assn">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:王立英</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="ass">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:平平</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="ase">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:夏日玫瑰</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="asw">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:玉</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="asq">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
                <div class="pingdanWindowItems">
                    <img class="pindanLeftImg" src="images/pindang.png">

                    <div class="pindanCenter">
                        <div class="pindanCenterDiv">
                            <a class=" pingdanItemsName">@@:玉111</a>
                            <a class="ChaRen">差1人</a>
                        </div>
                        <div class="pindanCenterTime">剩余
                            <span class="dingshi" data-time="2018-11-13 06:20:20" id="asar">
                            23:00:15:0
                        </span>
                        </div>
                    </div>
                    <div class="pindanRight">
                        <div class="pindanRightBtn">
                            去拼单</div>
                    </div>
                </div>
            </div>
        </div>
</div>

3:js代码

//查看更多弹框
<script>
    //显示规格窗口
    function show_more() {
        console.log('显示');
        $(".view-more").show();
    }
    //关闭规格窗口
    function close_more() {
        $(".view-more").hide();
   }
</script>
//拼单倒计时弹框
<script src="js/moment.min.js" th:src="${rootPath + '/js/moment.min.js'}"></script>
<script th:if="${collageList!=null}">    
    //定义一个立即执行的函数
    (function () {
        var Ticts = function Ticts() {
            this.ticts = {};
        };
        Ticts.prototype.createTicts = function (id, dealline) {
            var ticts = this;
            var time = moment(dealline).diff(moment());
            var _ticts = this.ticts[id] = {
                dealine: dealline
                , id: id
                , time: time
                , interval: setInterval(function () {
                    var t = null;
                    var d = null;
                    var h = null;
                    var m = null;
                    var s = null;

                    t = _ticts.time / 1000;
                    d = Math.floor(t / (24 * 3600));
                    h = Math.floor((t - 24 * 3600 * d) / 3600);
                    m = Math.floor((t - 24 * 3600 * d - h * 3600) / 60);
                    s = Math.floor((t - 24 * 3600 * d - h * 3600 - m * 60));
                    h = (24 * d) + h;
                    if (h < 10) h = "0" + h;
                    if (m < 10) m = "0" + m;
                    if (s < 10) s = "0" + s;
                    document.getElementById(id).innerHTML = h + ':' + m + ':' + s;
                    _ticts.time -= 1000;
                    if (_ticts.time < 0)
                        ticts.deleteTicts(id);//判断是否到期,到期后自动删除定时器
                }, 1000)
            }
        };
        Ticts.prototype.deleteTicts = function (id) {
            clearInterval(this.ticts[id].interval);//清楚定时器的方法,需要定时器的指针作为参数传入clearInterval
            delete this.ticts[id];//通过delete的方法删除对象中的属性
        };
        //新建一个ticts对象,放到window全局函数中,那么在html页面是(或者其他js文件)可以访问该对象
        window.Ticts = new Ticts();
    })();

    $.each($(".dingshi"), function (i, item) {
        console.log($(".dingshi").eq(i).attr("data-time"));
        Ticts.createTicts($(".dingshi").eq(i).attr("id"), $(".dingshi").eq(i).attr("data-time"));
    });
    </script>

4:css样式

/*-----------------------------查看更多样式*/
.mui-pull-right {
    float: right;
    padding-right: 0.7rem;
} 
.seemore {
    color: #aaaaaa;
    font-size:16px;
}
/*-----------------------------弹框样式*/
.view-more {
    box-shadow: 0 0 0.4rem rgba(0, 0, 0, .3);
    -webkit-border-radius: 0.3rem;
    right: 7%;
    left: 7%;
    height: 13rem;
    z-index: 999999999999999999999999999;
    background: #ffffff;
    position: fixed;
    top: 0;
    margin-top: 7.6rem;
}

.PingDanPopoverTitle {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    position: relative;
}
.PingDanPopoverTitle a {
    color: #000000;
    font-size: 16px;
}
#PingdanClose {
    font-size: 17px;
    position: fixed;
    top: 7rem;
    right: 0;
}
.viewmorelist {
    position: absolute;
    z-index: 2;
    top: 2rem;
    bottom: 0;
    left: 0;
    overflow: auto;
    width: 100%;
}
.pingdanWindowItems {
    float: left;
    width: 100%;
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 0.1rem;
    font-size: 16px;
}
.pindanLeftImg {
    height: 2rem;
    width: 2rem;
    margin-top: 0.2rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    border: 1px solid #ccc;
    float: left;
}
.pindanCenter {
    width: 50%;
    float: left;
    line-height: 1.3rem;
}
.pindanCenterDiv {
    font-size: 15px;
    text-align: left;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
}
.pingdanItemsName {
    font-weight: bold;
    width: 58%;
    display: inline-block;
    float: left;
    color: black;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ChaRen {
    margin-left: 0.2rem;
    display: inline-block;
    float: left;
    color: black;
}
.pindanCenterTime {
    margin-left: 0.3rem;
    font-size: 15px;
    text-align: left;
    margin-top: -0.5rem;
    color: #858585;
    float: left;
}
.pindanRight {
    width: 2.3rem;
    float: right;
    margin-right: 0.5rem;
    text-align: center;
}
.pindanRightBtn {
    background: #E02D26;
    font-size: 15px;
    color: white;
    height: 1.2rem;
    margin-top: 0.7rem;
    line-height: 1.2rem;
    border-radius: 0.3rem;
} 

注:h5页面单位一般使用rem单位具有手机兼容性,但是字体单位使用px;

5:页面效果如下: