實現商品秒殺 時間倒計時

//此案例爲TP5 框架  mvc三層所做！只供參考

//C層 登陸成功  調用模型層  

public function login(){
    $name=input("get.name");
    $pwd=input("get.pwd");
    if(empty($name) || empty($pwd)){
        $this->error("帳號密碼不能爲空");
    }
    //實例化模型層
      $res=new Login();
      $list=$res->index($name,$pwd);
      if($list){
          Session::set("name",$list['name']);
          $this->success("登陸成功","show");
      }else{
          $this->error("帳號或密碼錯誤");
      }
}

 

//m層   進行時間的分配

public function getgoods(){
//查詢數據
    $data=$this->select()->toArray();
//循環遍歷
    foreach($data as $k =>$v){
        $time=$v['end_time']-time();
        //有效的小時
        $hour=floor($time/3600);
        //有效分鐘
        $min=floor(($time-$hour*3600)/60);
        //有效秒
        $second=$time-$hour*3600-$min*60;
        //合併到原數組
        $data[$k]['hour']=$hour;
        $data[$k]['min']=$min;
        $data[$k]['second']=$second;
    }
    return $data;
}
//根據id查詢庫存
public function cun($id){
     return $this->where('id',$id)->find()->toArray();
}



//登陸成功跳到展現頁面   顯示秒殺剩餘時間
public function show(){
    $goods=new Goods();
    $data=$goods->getgoods();
  //  print_r($data);
    return view("show",['data'=>$data]);
}

 

V層展現秒殺頁面

{foreach name="data" id="v"}
  <ul style="list-style-type: none;border: 2px red solid;margin-top: 15px;width: 400px">
      <li>名稱：{$v['name']}</li>
      <li>價格：{$v['price']}</li>
      <li>庫存：{$v['count']}</li>
      <li><span id="{$v['id']}">活動剩餘時間：{$v['hour']}小時{$v['min']}分鐘{$v['second']}秒</span></li>
      <input type="button" value="當即秒殺" class="but" id="{$v.id}">
  </ul>
{/foreach}

 

（js方法）
//獲取id跳動 c層，判斷商品庫存，排隊人數

$(".but").click(function () {
    var sid=$(this).attr("id");
   $.get(
       "{:url('chart/show_do')}?id="+sid,
       function (data) {
            if(data==1){
               alert("商品已賣完！！！");
            }else if(data==2){
               alert("請您稍後，正在排隊中");
            }else{
               alert("秒殺成功，請下單");
               location.href="{:url('chart/goods')}";
           }
       }
   )
})

 

、

//實現每秒執行一次 ，實現秒殺倒計時

$(document).ready(function () {
    window.setInterval(function () {
        var sp=$("#sp").val();
         $.get(
             "{:url('chart/datajson')}",
             function (data) {
                 var res=JSON.parse(data)
                 $.each(res,function (k,v) {
                    var str='';
                     str += "活動剩餘時間："+v.hour+"時"+v.min+"分"+v.second+"秒";
                     $("#"+v.id).text(str);
                 })
             })
    },1000)