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

前期准备工作:

引入viewport 移动端适配方案:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

通过cdn引入jq库:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

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

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

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

创建一个空的文件,用来接收所点的菜的名称:
- 文件名设定为;user.txt

开始进行编写:

编写html框架:

<body>
 <div class="xx">
     点菜器
 </div>
 <div class="header">
     <input type="text" name="number"><button>随机出餐</button>
 </div>
 <div class="list">
 </div>
</body>

进行css样式层的搭建:

<style>
     .xx{
         background-color:greenyellow;
         width: 100px;
         height: 60px;
         line-height: 60px;
         color: #FFF;
         border: 1px solid #ccc;
         vertical-align: middle;
         margin:  20px auto;
         text-align: center;
     }
     .header{
         width:80%;
         height:80px;
         min-width: 505px;
         margin:0 auto;
         text-align: center;
     }
     .header input{
         height: 60px;
         width: 400px;
         border: 1px solid #ccc;
         box-sizing: border-box;
         vertical-align: middle;
         outline: none;
         text-indent: 30px;
         font-size: 20px;
     }
     .header button{
         background-color: gold;
         width: 100px;
         height: 60px;
         line-height: 60px;
         color: #FFF;
         border: 1px solid #ccc;
         vertical-align: middle;
         outline: none;
     }
     .list{
         width: 80%;
         min-height: 505px;
         background-color: beige;
         margin:0 auto;
     }
     .list span{
         display: inline-block;
         background-color: aquamarine;
         color: #333;
         padding:10px 20px;
         border-radius:5px;
         margin: 20px;
         cursor: pointer;
     }
</style>

进行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.length;i++){
                   $('<span>'+e[i]+'</span>').appendTo($('.list'));
               }
           },'json')
       });

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

   <script>
   $(function(){
       $('button').click(function(){
           $('.list').on('click','span',function(){
               $(this).css('backgroundColor','#186ecc',"color","#fff");
           })
           //get请求
           $.get('create.php',{num:$('input').val()},function(e){
               $('.list').html('');
               for(var i=0;i<e.length;i++){
                   $('<span>'+e[i]+'</span>').appendTo($('.list'));
               }
           },'json')
       });
   })
   </script>

创建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

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

前期准备工作:

开始进行编写:

友情链接更多精彩内容