实现商品秒杀 时间倒计时

时间:2022-04-04 17:06:07

//此案例为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)