html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.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;
}
.fanhui{
width: 80%;
min-height: 200px;
background-color: green;
margin:0 auto;
}
.fanhui span{
display: inline-block;
background-color: aquamarine;
color: #333;
padding:10px 20px;
border-radius:5px;
margin: 20px;
cursor: pointer;
}
</style>
<title></title>
</head>
<body>
<div class="header">
<input type="text" name="number"><button>随机产生菜名</button>
</div>
<div class="list">
</div>
<div class="fanhui"></div>
<script>
$(function(){
$('button').click(function(){
$('.list').on('click','span',function(){
$(this).css({
"pointer-events":"none",
"cursor": "not-allowed",
"backgroundColor":"#ddd",
});
var sval = $(this).text();
$.get('yd.php',{spval:$(this).text()},function(e){
console.log(1);
for(var i=0;i<e.length;i++){
$('<span>'+e[i]+'</span>').appendTo($('.fanhui'));
}
},'json')
})
//get请求
$.get('getgan.php',{num:$('input').val()},function(e){
$('.list').html('');
for(var i=0;i<e.length;i++){
$('<span>'+e[i]+'</span>').appendTo($('.list'));
}
},'json')
});
});
</script>
</body>
</html>
yd.php
<?php
var_dump($_GET);
// $name = (int)$_GET['spval'];
$cainame = $_GET['spval'];
$str = $cainame .'|';
file_put_contents('record.txt',$str,FILE_APPEND);
$stu_arr = explode('|',file_get_contents('record.txt'));
echo json_encode($stu_arr);
getgan.php
<?php
$num = (int)$_GET['num'];
//至少产生1名学生
if($num<=0){
$re= [
'code' => 1001,
'message'=>'至少产生一名学生'
];
echo json_encode($re);
die;
}
//所有的学生
$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,52);;
}
array_push($arr,$stu_num);
}
$re = []; //返回的学生数组
foreach($arr as $k){
array_push($re,$stu_arr[$k]);
}
echo json_encode($re);
record.txt
豆鼓鱼|羊耳鸡塔|豆瓣鲫鱼|酱爆肉|坛子肉|鱼香荷包蛋|麻酱凤尾|绣球鱼翅|芪烧活鱼|豆鼓鱼|火爆腰花|复元汤|羊耳鸡塔
效果展示