• 【Js】单页面多个倒计时问题


    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>多个timeout</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div>
            <h5 class="text-success">倒计</h5>
            <!-- 已结束 -->
            <p id="order_time_1" data-id="1" data-starttime="2019-12-01 11:59:59" data-endtime="2020-02-02 11:30:59"
                class="remain-time">已结束</p>
            <!-- 距多少开始 -->
            <p id="order_time_2" data-id="2" data-starttime="2019-12-08 11:30:00" data-endtime="2020-03-20 12:00:00"
                class="remain-time">距多少开始</p>
            <!-- 距多少开始 -->
            <p id="order_time_22" data-id="22" data-starttime="2019-12-01 16:42:30" data-endtime="2020-03-20 12:00:00"
                class="remain-time">距多少开始3</p>
    
            <!-- 距多少结束 -->
            <p id="order_time_3" data-id="3" data-starttime="2019-12-01 23:59:59" data-endtime="2020-03-10 23:59:59"
                class="remain-time">距多少结束</p>
            <!-- 距多少结束 -->
            <p id="order_time_33" data-id="33" data-starttime="2019-12-01 23:59:59" data-endtime="2020-03-1 16:44:00"
                class="remain-time">距多少结束3</p>
        </div>
    
        <script type="text/javascript">
            var jsq = {
                startdata: [],
                enddata: [],
                addStart: function (key, value) {
                    if (typeof (jsq.startdata[key]) == 'undefined') {
                        jsq.startdata[key] = value;
                    }
                },
                addEnd: function (key, value) {
                    if (typeof (jsq.enddata[key]) == 'undefined') {
                        jsq.enddata[key] = value;
                    }
                },
                addAll: function () {
                    $(".remain-time").each(function (i) {
                        var key = $(this).attr("data-id");
                        var startValue = $(this).attr("data-starttime");
                        var endValue = $(this).attr("data-endtime");
                        //添加计时元素
                        if (typeof (jsq.startdata[key]) == 'undefined') {
                            jsq.addStart(key, startValue);
                            jsq.addEnd(key, endValue);
                        }
                    });
                    //执行检测
                    jsq.subAll();
                },
                subAll: function () {
                    for (var index in jsq.startdata) {
                        var nowTime = new Date();
                        var startTime = new Date(jsq.startdata[index].toString().replace(/-/g, '/'));
                        var endTime = new Date(jsq.enddata[index].toString().replace(/-/g, '/'));
    
                        var S_timestamp = startTime.getTime() - nowTime.getTime();
                        var E_timestamp = endTime.getTime() - nowTime.getTime();
    
                        //console.log(startTime);
                        if (E_timestamp <= 1000) //小1秒
                        {
                            $('#order_time_' + index).text('已结束 >' + jsq.enddata[index].toString());
                            $('#order_time_' + index).css("color", "red");
                            //$("#order_time_" + key).parent().parent().parent().parent().remove(); //删除
                        }
                        else if (E_timestamp > 0 && S_timestamp >= 1000) //大1秒 
                        {
                            //提取时间元素
                            var _day = Math.floor(S_timestamp / 1000 / 60 / 60 / 24);
                            var _hour = Math.floor(S_timestamp / 1000 / 60 / 60 % 24);
                            var _min = Math.floor(S_timestamp / 1000 / 60 % 60);
                            var _sec = Math.floor(S_timestamp / 1000 % 60);
    
                            if (_hour < 10) {
                                _hour = "0" + _hour;
                            }
                            if (_min < 10) {
                                _min = "0" + _min;
                            }
                            if (_sec < 10) {
                                _sec = "0" + _sec;
                            }
                            $('#order_time_' + index).text(_day + "" + _hour + "" + _min + "" + _sec + "" + "开始");
                        }
                        else {
                            //提取时间元素
                            var _day = Math.floor(E_timestamp / 1000 / 60 / 60 / 24);
                            var _hour = Math.floor(E_timestamp / 1000 / 60 / 60 % 24);
                            var _min = Math.floor(E_timestamp / 1000 / 60 % 60);
                            var _sec = Math.floor(E_timestamp / 1000 % 60);
    
                            if (_hour < 10) {
                                _hour = "0" + _hour;
                            }
                            if (_min < 10) {
                                _min = "0" + _min;
                            }
                            if (_sec < 10) {
                                _sec = "0" + _sec;
                            }
                            $('#order_time_' + index).text(_day + "" + _hour + "" + _min + "" + _sec + "" + "结束");
                        }
                    }
                }
            };
    
            $(function () {
                //倒计时
                setInterval('jsq.addAll()', 1000);
            });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    Oracle常用系统查询SQL
    easyui中使用的遮罩层
    EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)
    jQueryEasyUI创建菜单主页
    linux 的环境变量的配置文件
    angular reactive form
    svn代码回滚
    golang restful api
    golang embedded structs
    Angular Multiple HTTP Requests with RxJS
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/11899166.html
Copyright © 2020-2023  润新知