HTML + CSS + JQ + PHP 完成点菜器操作:

前期准备工作:

1. 引入viewport 移动端适配方案:

2. 通过cdn引入jq库:

3. 创建一个文件,并且文件中包含所有想要点的菜

   • 名称为:stu.txt 下面 php中出现的stu.txt 为此文件

   鱼香肉丝|
   毛血旺|
   辣炒鱿鱼丝|
   宫爆鸡丁|
   辣子鸡|
   泡凤爪|
   土豆烧排骨|
   辣子鸡丁|
   灯影牛肉|
   干煸牛肉丝|
   冬菜扣肉|
   开水白菜|
   东坡肘子|
   干烧鱼|
   宫保鸡丁|
   川菜回锅肉|
   川辣黄瓜|
   麻婆豆腐|
   夫妻肺片|
   子姜鸭|
   ...............
   

4. 创建一个空的文件,用来接收所点的菜的名称:

   • 文件名设定为;user.txt

开始进行编写:

1. 编写html框架:

   
    
   
        点菜器
    
    
   
        随机出餐
    
    
   
    
   
   

2. 进行css样式层的搭建:

3. 进行js的编写:

   • 申明获取按钮点击事件,并在点击的时候更换背景颜色

     $('button').click(function(){
                $('.list').on('click','span',function(){        $(this).css('backgroundColor','#186ecc',"color","#fff");
                })
     

   • 书写get请求:

        $.get('03create.php',{num:$('input').val()},function(e){
                    $('.list').html('');
                    for(var i=0;i'+e[i]+'').appendTo($('.list'));
                    }
                },'json')
            });
     

   • js完整版结合;用一个函数进行包裹:

4. 创建jq中引用的名为create.php的文件:

• 至少产生1道菜设定

  $num = (int)$_GET['num'];
  //至少产生1道菜
  if($num<=0){
     $re= [
         'code' => 1001,
         'message'=>'至少产生1道菜'
     ];
     echo json_encode($re);
     die;
  }
  

• 获取所有的菜并对菜进行操作:

 ```php
 //所有的菜
 $stu_arr = explode('|',file_get_contents('stu.txt'));
 $arr = [];  //用户保存菜的编号
 for($i=0;$i<$num;$i++){ //用于循环产生菜编号
    $stu_num = mt_rand(0,53); //随机产生
    while(in_array($stu_num,$arr)){ //判断是否产生了相同的菜编号
        $stu_num = mt_rand(0,75);;
    }
    array_push($arr,$stu_num);
 }
 ```

• 返回的所有菜的数组,并随机出现菜的名称,同时记录点击菜的名称:

 ``` php
 $re = []; //返回的菜数组
 foreach($arr as $k){
    array_push($re,$stu_arr[$k]);
 }
 file_put_contents('user.txt',$stu_arr[$k],FILE_APPEND);
 echo json_encode($re);
 ```

1.png

2.png

3.png