• 实现商品秒杀 时间倒计时


    //此案例为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; 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)
     
  • 相关阅读:
    在Vue.js中使用Stylus预处理器
    前端面试问题(JavaScript)
    前端面试问题(CSS3)
    前端面试问题(HTML5+Http+web)
    VUE2中文文档:组件基础篇
    VUE2中文文档:语法基础笔记
    transition动画效果初识(实例)
    Centos5.2升级openssh7.4p1
    解决python升级导致pip无法使用
    使用jenkins时因为脚本权限问题执行项目失败
  • 原文地址:https://www.cnblogs.com/chaihtml/p/10151847.html
Copyright © 2020-2023  润新知