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);
