jquery实现页面多个不同倒计时

思路有两种

第一种是要动态的

思路是这样的,就是我们创建两个函数,一个函数用来发送post请求到后台的php,拿到了所有的截止时间,然后使用回调函数处理这个剩余时间,减去当前的服务器时间,最后经过格式化为倒计时的显示的时间,然后放入到页面中.这个时候就会显示一个剩余的时间,但是只有在下次请求的时候才会再次显示剩余的时间.

函数二就是直接获取页面中的显示时间的元素里面的时间内容,经过格式化后,再减去1,然后,再次的将这个时间放入到元素内容中,每秒执行一次,如果是多个定时器,就必须要使用循环给他拿出来

首先后台的代码

/*@default.php
public function lotteryCodes() {
        $codes = [];
        
        $issues = issues::getAllCurrentIssues();
        $rows = $GLOBALS ['db']->find_all("lottery_code", "*");
        foreach ($rows as $k => $row) {
            $id = $row['lottery_id'];
            if (strpos(trim($row['code']), " ")) {
                $row['code_arr'] = explode(" ", trim($row['code']));
            } else {
                $row['code_arr'] = str_split(trim($row['code']));
            }
            $row['current_issue'] = array_intersect_key($issues[$id], ['start_sale_time' => 0, 'end_sale_time' => 0, 'issue' => 0]);
            $codes[$id] = $row;
        }
        $result = [
            "serverTime"=>date('Y/m/d H:i:s'),
            "status" => "success",
            "codes" => $codes
        ];
        echo json_encode($result, JSON_PRETTY_PRINT);
        safe_exit();
    }

奖期类中的代码 issue.class.php
public function getAllCurrentIssues() {
        $date = time();
        $dt = date('Y-m-d H:i:s', $date);
        $sql = "SELECT * FROM `issues` WHERE  `start_sale_time` <= '$dt' AND `end_sale_time` >= '$dt'" . ' LIMIT 25';
        return $GLOBALS ['db']->getAll($sql, 'lottery_id');
    }

这个方法拿到了所有的彩种的开奖的号码和数组,还有所有的正在销售的奖期信息

前台代码,使用了很多的循环和遍历

<script>

            function heightChanged() {
                var D = document;
                if (top.resizeFrame) {
                    var height = $("#body").height();
                    top.resizeFrame(height);
                } else {
                }
            }
            $(document).ready(function () {
                setTimeout(heightChanged, 1000);
                setInterval(heightChanged, 2000);
                var num = [1, 4, 8, 11, 12, 2, 5, 7, 6, 14, 15, 21, 22, 9, 13, 16, 10, 17, 18, 19, 20];  
                for (var i = 0; i <= num.length; i++) {
                    $("#lottery_codes").find('.cz_number').eq(i).addClass('lottery_' + num[i]);
                    $("#lottery_codes").find('.time_h').eq(i).addClass('lottery_' + num[i]);
                    $("#lottery_codes").find('.hk').removeClass('lottery_' + num[i]);
                    $("#lottery_codes").find('.pk').removeClass('lottery_' + num[i]);
                }
            });
	//这里使用这种办法给每个元素选择性的加入各自的彩种的id类,便于我们后面遍历和循环
            function subTime(t) {  //这个函数是用来计算秒数得到显示格式的时间
                var ob = t > 0 ? {
                    day: Math.floor(t / 86400),
                    hour: Math.floor(t % 86400 / 3600),
                    minute: Math.floor(t % 3600 / 60),
                    second: Math.floor(t % 60)
                } : {
                    day: 0,
                    hour: 0,
                    minute: 0,
                    second: 0
                };
                if ((ob.hour + "").length == 1) {
                    ob.hour = "0" + ob.hour;
                }
                if ((ob.minute + "").length == 1) {
                    ob.minute = "0" + ob.minute;
                }
                if ((ob.second + "").length == 1) {
                    ob.second = "0" + ob.second;
                }
                return ob;
            }

            //首页开奖号码
            var curTimeInfo = "";  全局变量,必须等待第一个函数执行完毕了,才能执行第二个函数,才能得到这个值,这里没有使用,倒计时里用的本地的
              
            function getLotteryCodes() {
            $.post(
                    '?c=default&a=lotteryCodes',
            {op: "getlotterycodes"},
                    function (response) {
                    console.log(response);
                            curTimeInfo = response;
                            var codes = response.codes;
                            $.each(codes, function (lottery, info) { //info就是遍历一次得到codes对象下的所有每个彩种的对象
                            for (var i = 0; i <= info.code_arr.length; i++) {
                            $(".lottery_" + lottery).children().eq(i).text(info.code_arr[i]); //遍历加循环,将开奖号放入到对应的位置
                            }
                            $(".hk").find(".cz_tm").children().text(info.code_arr[6]); //六合彩和pk10格式不一样就要单独来,这里是第七位的特码,下面的就是前面的
                            });
                            for (var i = 0; i < (codes[18].code_arr.length - 1); i++) {
                    $(".hk").find(".pre").children().eq(i).text(codes[18].code_arr[i]);
                    }
                    for (var i = 0; i < (codes[17].code_arr.length); i++) {
                    $(".pk").find(".first").children().eq(i).text(codes[17].code_arr[i]);
                    }
                    var k = 0;
                            for (var j = 5; j < (codes[17].code_arr.length); j++) {
                    $(".pk").find(".second").children().eq(k).text(codes[17].code_arr[j]);
                            k++;
                    }
                    var curServerTime = response.serverTime;
                          var m = 0;
                            for (var j in codes) {
                    m++; //统计彩种的个数
                    }
                    for (var i = 1; i <= m; i++) {
                        try{
                         var curRemainTime = getTS(codes[i].current_issue.end_sale_time) - getTS(curServerTime);
                        } catch (e){
                           continue;
                        }
                               var d = subTime(curRemainTime);
                            if (curRemainTime > 0) {
                    $(".cz_time").find(".lottery_"+ i).text(d.hour + ":" + d.minute + ":" + d.second);
                    }
                    }
                    },
                            "json");
                    }
                    
                    setTimeout(getLotteryCodes, 1000);
                    window.setInterval(getLotteryCodes, 10000);
                    //倒计时,必须等待请求的回调函数 执行完毕才能有效果,
                            function theTimer() {
                               var num = $(".time_h").length; //得到所有计时器的元素的个数,比如有21(js从0)个彩种,循环21遍,每一个生成这个彩种的倒计时,
                                for(var i=0;i<= num;i++){
                                    try{
                            var Str = $(".lottery_"+i).html();  //
                                    console.log(Str);
                                    var Temp = Str.split(':');
                                    var Seconds = 3600 * Number(Temp[0]) + 60 * Number(Temp[1]) + Number(Temp[2]);
                                    var secondTime = Seconds - 1; //这里就是反复获取时间内容,再减去1,
                                    var t = subTime(secondTime);
                                    console.log(num);
                                    $(".cz_time").find(".lottery_"+i).text(t.hour + ":" + t.minute + ":" + t.second);
                                    }catch(e){
                                        continue;    //这里使用try来检测异常,如果没有对应的奖期,就会是null,那就直接跳过这个彩种的,执行下一循环,不加的话,就异常无法 执行,我们获取到异常,处理,可以给前面的多加if判断分支,这里处理就是跳过,
                                    }
        }
                            }
                  setInterval(theTimer, 1000);  //每秒执行一次

        </script>