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

来源：互联网发布：帕尔斯知乎编辑：程序博客网时间：2024/06/13 04:55

思路有两种

第一种是要动态的

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

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

首先后台的代码

/*@default.phppublic 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.phppublic 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>

0 0