Javascript 如何在从数据库获取的每一行中添加实时计数计时器

我需要显示从mysql数据库和使用foreach循环将订单加载到监视器页面的小时、分钟和秒数。我对javascript还是个新手，我在计算计时器时遇到了问题，它在我的第一行结果的同一时间执行

以下是我的Ajax代码：

    /* AJAX request to checker */
    function check(){
        $.ajax({
            type: 'POST',
            url: 'http://localhost/kds1/monitor/checker',
            dataType: 'json',
            data: {
                counter:$('#dispatch-list').data('counter')
            }
        }).done(function( response ) {
            /* update counter */
            $('#dispatch-list').data('counter',response.current);
            /* check if with response we got a new update */
            if(response.update==true){
                if(response.patch==false){
                    $('#title-un').text('New Order Added');
                    $('#para-un').text('There are new addition to the order, kindly check the food preparation or miscellaneous tab. thanks!');
                    $('#update-notification').fadeIn(1500);
                    $('#update-notification').delay(3000).fadeOut(1500);
                    $('#order-list').html(response.orders);
                    $('#misc-list').html(response.misc);
                    $('#dispatch-list').html(response.dispatch);
                    $('#reject-list').html(response.reject);
                } else {
                    $('#order-list').html(response.orders);
                    $('#misc-list').html(response.misc);
                    $('#dispatch-list').html(response.dispatch);
                    $('#reject-list').html(response.reject);
                }
                //$('#counter-list').html(response.counters);
            }
        });
    }
    //Every 5 sec check if there is new update
    setInterval(check,5000);
    //end of checker

这是我的控制器

public function checker()
{
    //set initial value of update to false
    $data['update'] = false;

    //get current counter
    $cc = $this->order_model->check_changes();
    foreach($cc as $row){
        $data['current'] = $row->counter;
    }

    if(isset($_POST) && !empty($_POST['counter']) && $_POST['counter']!=$data['current']){
        $data['orders']   = $this->order_model->get_order_buttons(1);
        $data['misc']     = $this->order_model->get_order_buttons(2);
        $data['dispatch'] = $this->order_model->get_order_buttons(3);
        $data['reject']   = $this->order_model->get_order_buttons(4);
        $data['update'] = true;
        $data['patch'] = true;
    }

    echo json_encode($data);
}

这是我的模型，这是我显示计数计时器的所有按钮

public function get_order_buttons($id)
{
    $this->mysql->select('id, trans_no, room_no, date, HOUR(time_in) as hour, MINUTE(time_in) as minute, time_in, SUM(qty) as qty1, GROUP_CONCAT(description) as description, post, code, status, type');
    $this->mysql->from('orders');
       $date = date('Y-m-d');
       $dateMin = date('Y-m-d',(strtotime ( '-1 day' , strtotime ( $date) ) ));
       $where = "((`date` = '".$dateMin."' AND `time_in` >= '22:00:00') OR (`date` = '".$date."' AND `time_in` >= '00:00:00'))";
    $this->mysql->where($where);
    if($id == 1){
        //orders
        $this->mysql->where('status', 0);
        $this->mysql->where('type', 1);
    } elseif($id == 2){
        //misc
        $this->mysql->where('status', 0);
        $this->mysql->where('type', 0);
    } elseif($id == 3){
        //dispatch
        $this->mysql->where('status', 1);
    } elseif($id == 4){
        //rejected items
        $this->mysql->where('status', 3);
    }
    $this->mysql->group_by('trans_no');
    $this->mysql->order_by('date, hour, minute', 'ASC');

    $query = $this->mysql->get();
    $results = $query->result();

        $clr = '';
        $result = '';
        foreach($results as $row){
            if($row->status == 0 && $row->type == 1){
                $btn = 'onclick="show_order('.$row->trans_no.')"';
                $clr = 'btn-success';
            }elseif($row->status == 0 && $row->type == 0){
                $btn = 'onclick="show_misc('.$row->trans_no.')"';
                $clr = 'btn-success';
            }elseif($row->status == 1){
                $btn = 'onclick="show_dispatch('.$row->trans_no.')"';
            }elseif($row->status == 3){
                $btn = 'onclick="show_reject('.$row->trans_no.')"';
                $clr = 'bg-navy';
            }
            $result .= '<a '.$btn.' class="btn '.$clr.' btn-success btn-social" style="margin-top:5px;margin-bottom:5px;margin-right:10px;">
                        <i class="fa">'.$row->room_no.'</i> 00:00:00 
                    </a>';
        }
    return $result;
}

公共函数获取订单按钮（$id）
{
$this->mysql->select（'id，trans_no，room_no，date，HOUR（time_in）as HOUR，MINUTE（time_in）as MINUTE，time_in，SUM（qty）as qty1，GROUP_CONCAT（description）as description，post，code，status，type'）；
$this->mysql->from（'orders'）；
$date=日期（'Y-m-d'）；
$dateMin=date（'Y-m-d'，（strotime（'-1天'，strotime（'date））；
$where=“（`date`=''.$dateMin.”和`time'>='22:00:00'）或（`date`='.$date'.'和`time'>='00:00'）；
$this->mysql->where（$where）；
如果（$id==1）{
//命令
$this->mysql->where（'status'，0）；
$this->mysql->where（'type'，1）；
}elseif（$id==2）{
//杂项
$this->mysql->where（'status'，0）；
$this->mysql->where（'type'，0）；
}elseif（$id==3）{
//派遣
$this->mysql->where（'status'，1）；
}elseif（$id==4）{
//拒收项目
$this->mysql->where（'status'，3）；
}
$this->mysql->group_by（'trans_no'）；
$this->mysql->order_by（'date，hour，minute，'ASC'）；
$query=$this->mysql->get（）；
$results=$query->result（）；
$clr=''；
$result=''；
foreach（$结果为$行）{
如果（$row->status==0&&$row->type==1）{
$btn='onclick=“显示订单（'.$row->trans\u no.”）；
$clr=‘btn成功’；
}elseif（$row->status==0&&$row->type==0）{
$btn='onclick=“显示杂项（'.$row->trans\u no.”）；
$clr=‘btn成功’；
}elseif（$row->status==1）{
$btn='onclick=“显示发送（'.$row->trans\u no'）”；
}elseif（$row->status==3）{
$btn='onclick=“显示拒绝（'.$row->trans\u no.”）；
$clr='bg海军'；
}
$result.='
请参阅。这里有许多关于创建计数器的问题。您可以添加到select语句中：select TIMEDIFF（TIME（NOW（）），TIME_in）随着时间流逝，结果中的“$row->room_no.”00:00:00更改为“$row->room_no.”。$row->timepassed注意：有时数据库服务器的时间设置与web服务器的时间设置不同。如果是这种情况，则需要查看其他选项/设置。嗨，RobG，我已经编辑过了，对吗？谢谢！嗨，jeff，我还有一个我的数据库中的列，其中包括它进入系统的时间。我只是不知道如何使用javascript加载它。谢谢！而且我真的需要它使用javascript实时计数，就像你在订单上有计时器一样。
    <span id="countdown" class="timer"></span>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
    }
}
var countdownTimer = setInterval('timer()', 1000);
</script>