<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>就吃这个了：<span></span></h1>
<div class="btn">
<span id="option" style="display:inline-block;font-size:20px;">
<span>
<span style="padding-right:10px;"><input type="checkbox" name="type" value="1" style="width:20px;height:20px;">招牌</span>
<span style="padding-right:10px;"><input type="checkbox" name="type" value="2" style="width:20px;height:20px;" checked>小炒</span>
<span style="padding-right:10px;"><input type="checkbox" name="type" value="3" style="width:20px;height:20px;">汤</span>
</span>
数量:<input type="number" name="num" style="width:50px;height:20px;font-size:20px;" value="3" />
</span>
<button class="select">随机选菜</button>
<button class="add" style="margin-left: 20px;display:none;">新增菜单</button>
<button class="del" style="margin-left: 20px;display:none;">删除菜单</button>
</div>
<div id="menu"></div>
</body>
<style>
.hover {
animation: identifier 1.5s linear 0s infinite normal;
position: relative;
cursor: pointer;
}
.hover::after {
position: absolute;
display: block;
content: '×';
right: 0;
top: 0;
width: 16px;
height: 16px;
background-color: red;
text-align: center;
line-height: 16px;
color: white;
}
@keyframes identifier {
0% {
position: relative;
top: 0px;
left: 0;
}
33% {
position: relative;
top: -10px;
left: 0;
}
66% {
position: relative;
top: 10px;
left: 0;
}
100% {
position: relative;
top: 0px;
left: 0;
}
}
body {
background-color: #96ceb4;
}
#menu {
width: 1200px;
min-height: 30px;
margin: 0 auto;
padding: 20px;
border: 3px solid white;
}
#menu .item {
display: inline-block;
padding: 10px 35px;
/*background-color: #ffad60;
margin-right: 10px;*/
height: 43px;
width:300px;
box-sizing: border-box;
border:1px solid transparent;
}
#menu .type{
font-size:24px;
text-align:center;
}
#menu .name{
display: inline-block;
width:50%;
}
#menu .price{
display: inline-block;
width:50%;
text-align:right;
}
h1 > span {
color: #d9534f;
}
h1 {
text-align: center;
}
.btn {
text-align: center;
}
.select {
background-color: #1f6ed4;
}
button {
width: 80px;
height: 40px;
border: none;
border-radius: 10px;
margin-bottom: 20px;
background-color: #2e94b9;
color: white;
}
.del {
background-color: #c73b0b;
}
button:hover {
cursor: pointer;
background-color: #fe9000;
}
</style>
<script>
let box = document.getElementById('menu');
let select = document.querySelector('h1 span');
let btn = document.querySelector('.select');
let add = document.querySelector('.add');
let del = document.querySelector('.del');
//let list = JSON.parse(localStorage.getItem('List')) || [];
//1招牌 2小炒 3汤
let list=[
{
"type": 1,
"name": "爆炒田鸡",
"price": 32
},
{
"type": 1,
"name": "腊耳尖",
"price": 28
},
{
"type": 1,
"name": "香辣鱼片",
"price": 32
},
{
"type": 1,
"name": "爆炒肥肠",
"price": 32
},
{
"type": 1,
"name": "土豆烧牛腩",
"price": 32
},
{
"type": 1,
"name": "口味猪蹄",
"price": 35
},
{
"type": 1,
"name": "干锅辣子鸡",
"price": 35
},
{
"type": 1,
"name": "红烧肉",
"price": 35
},
{
"type": 1,
"name": "千锅茶树菇",
"price": 35
},
{
"type": 1,
"name": "小炒牛肚",
"price": 38
},
{
"type": 2,
"name": "野山椒牛肉",
"price": 32
},
{
"type": 2,
"name": "萝卜干腊肉",
"price": 20
},
{
"type": 2,
"name": "香辣田螺肉",
"price": 20
},
{
"type": 2,
"name": "农家小炒肉",
"price": 25
},
{
"type": 2,
"name": "尖椒猪肚",
"price": 28
},
{
"type": 2,
"name": "子姜鸭",
"price": 20
},
{
"type": 2,
"name": "茶树菇炒肉",
"price": 22
},
{
"type": 2,
"name": "红烧鱼块",
"price": 18
},
{
"type": 2,
"name": "酸菜肥肠",
"price": 20
},
{
"type": 2,
"name": "酸辣鸡杂",
"price": 18
},
{
"type": 2,
"name": "毛豆炒肉",
"price": 20
},
{
"type": 2,
"name": "干椒腊肉",
"price": 22
},
{
"type": 2,
"name": "杀猪肉",
"price": 28
},
{
"type": 2,
"name": "农家一碗香",
"price": 20
},
{
"type": 2,
"name": "尖椒回锅肉",
"price": 25
},
{
"type": 2,
"name": "什锦野菜",
"price": 22
},
{
"type": 2,
"name": "凉瓜牛肉",
"price": 22
},
{
"type": 2,
"name": "干椒土鸡",
"price": 20
},
{
"type": 2,
"name": "小炒猪肝",
"price": 18
},
{
"type": 2,
"name": "乡里火焙鱼",
"price": 18
},
{
"type": 2,
"name": "粉皮焖土鸡",
"price": 28
},
{
"type": 2,
"name": "毛豆烧牛肉",
"price": 28
},
{
"type": 2,
"name": "香菇滑鸡",
"price": 20
},
{
"type": 2,
"name": "烟笋腊肉",
"price": 18
},
{
"type": 2,
"name": "酸菜小笋肉沫",
"price": 18
},
{
"type": 2,
"name": "蒜苔腊肉",
"price": 20
},
{
"type": 2,
"name": "干煽四季豆",
"price": 18
},
{
"type": 2,
"name": "茄子豆角",
"price": 18
},
{
"type": 2,
"name": "青椒拆骨肉",
"price": 22
},
{
"type": 2,
"name": "开胃鸭肠",
"price": 20
},
{
"type": 2,
"name": "萝卜丝牛肉",
"price": 20
},
{
"type": 2,
"name": "凉瓜炒蛋",
"price": 16
},
{
"type": 2,
"name": "茄子肉沫",
"price": 18
},
{
"type": 2,
"name": "干豆角腊肉",
"price": 18
},
{
"type": 2,
"name": "红烧茄子",
"price": 18
},
{
"type": 2,
"name": "家常豆腐炒腊肉",
"price": 18
},
{
"type": 2,
"name": "花菜炒肉",
"price": 18
},
{
"type": 2,
"name": "小笋炒肉",
"price": 18
},
{
"type": 2,
"name": "红椒香肠",
"price": 18
},
{
"type": 2,
"name": "酸菜回锅肉",
"price": 18
},
{
"type": 2,
"name": "火腿肠炒肉",
"price": 18
},
{
"type": 2,
"name": "腐竹炒肉",
"price": 18
},
{
"type": 2,
"name": "香干炒肉",
"price": 17
},
{
"type": 2,
"name": "青椒炒鸡蛋",
"price": 16
},
{
"type": 2,
"name": "莴笋腊肉",
"price": 18
},
{
"type": 2,
"name": "非菜小虾",
"price": 18
},
{
"type": 2,
"name": "油豆腐炒肉",
"price": 18
},
{
"type": 2,
"name": "外婆菜回锅肉",
"price": 18
},
{
"type": 2,
"name": "莲藕炒肉",
"price": 18
},
{
"type": 2,
"name": "四季豆炒肉",
"price": 18
},
{
"type": 2,
"name": "土豆片炒肉",
"price": 17
},
{
"type": 2,
"name": "长豆角炒肉",
"price": 18
},
{
"type": 2,
"name": "凉瓜炒肉",
"price": 18
},
{
"type": 2,
"name": "红萝卜丝炒肉",
"price": 17
},
{
"type": 2,
"name": "家常豆腐",
"price": 15
},
{
"type": 2,
"name": "木耳烧鸡",
"price": 19
},
{
"type": 2,
"name": "丝瓜肉片",
"price": 18
},
{
"type": 2,
"name": "千张肉片",
"price": 15
},
{
"type": 2,
"name": "洋葱炒肉",
"price": 16
},
{
"type": 2,
"name": "外婆菜炒肉",
"price": 17
},
{
"type": 2,
"name": "西红柿炒蛋",
"price": 16
},
{
"type": 2,
"name": "酸菜炒蛋",
"price": 15
},
{
"type": 2,
"name": "青椒茄子",
"price": 15
},
{
"type": 2,
"name": "青椒皮蛋",
"price": 15
},
{
"type": 2,
"name": "韭菜炒蛋",
"price": 15
},
{
"type": 2,
"name": "酸辣土豆丝",
"price": 15
},
{
"type": 2,
"name": "麻婆豆腐",
"price": 16
},
{
"type": 2,
"name": "红烧豆腐",
"price": 15
},
{
"type": 2,
"name": "木耳炒肉",
"price": 16
},
{
"type": 2,
"name": "攸县香干",
"price": 15
},
{
"type": 2,
"name": "香菇炒肉",
"price": 18
},
{
"type": 2,
"name": "青瓜炒肉",
"price": 17
},
{
"type": 2,
"name": "火腿炒蛋",
"price": 17
},
{
"type": 2,
"name": "香干腊肉",
"price": 18
},
{
"type": 2,
"name": "丝瓜炒蛋",
"price": 17
},
{
"type": 2,
"name": "莴笋炒肉",
"price": 17
},
{
"type": 2,
"name": "土豆烧鸡",
"price": 19
},
{
"type": 2,
"name": "青瓜火腿肠",
"price": 16
},
{
"type": 2,
"name": "黄瓜皮腊肉",
"price": 18
},
{
"type": 2,
"name": "手撕包菜",
"price": 14
},
{
"type": 2,
"name": "酸辣大白菜",
"price": 14
},
{
"type": 2,
"name": "时疏一律",
"price": 14
},
{
"type": 3,
"name": "猪肝肉片汤",
"price": 20
},
{
"type": 3,
"name": "鱼头豆腐汤",
"price": 28
},
{
"type": 3,
"name": "三鲜汤",
"price": 20
},
{
"type": 3,
"name": "西红柿蛋汤",
"price": 18
},
{
"type": 3,
"name": "丝瓜鸡蛋汤",
"price": 18
},
{
"type": 3,
"name": "紫菜蛋花汤",
"price": 18
}
];
window.onload = function () {
//首次进入页面时，获取本地存的值进行渲染
for (let i = 0; i < list.length; i++) {
let span = document.createElement('span');
span.classList.add('item');
span.setAttribute('id',i);
let item=list[i];
let type="";
if(i==0 || list[i-1].type!=item.type){
let div = document.createElement('div');
div.classList.add('type');
if(item.type==1){
div.innerHTML="招牌";
}else if(item.type==2){
div.innerHTML="小炒";
}else if(item.type==3){
div.innerHTML="汤";
}
box.appendChild(div);
}
span.classList.add('type'+item.type);
span.innerHTML = "<span class='name'>"+item.name+"</span><span class='price'> "+item.price+"元</span>";
box.appendChild(span);
}
//新增
add.addEventListener('click', function () {
let menu = document.querySelectorAll('#menu .item');
if (menu.length > 0) {
menu.forEach((item) => {
item.classList.remove('hover');
});
}
let val = prompt('请输入菜名：') || '';
if (val.trim() != '') {
list.push(val);
let span = document.createElement('span');
span.innerHTML = val;
box.appendChild(span);
}
});
//随机抽取
btn.addEventListener('click', function () {
let option = getFormValue('option');
if(option.type.length==0){
alert('请选择类型!');
return;
}
console.log('option',option);
if(!option.num){
alert('请填写数量!');
return;
}
option.num=parseInt(option.num);
if(option.num<=0){
alert('请填写大于0的数量!');
return;
}
if(option.num>=50){
alert('你吃得了这么多么吗,别瞎点!');
return;
}
/*try{
option.num = parseInt(option.num)
}catch(e){
}
if(.length==0){
alert('请选择类型!');
return;
}*/
let allMenu = document.querySelectorAll('#menu .item');
allMenu.forEach((item) => {
item.setAttribute('selected','false');
});
let typeAttr="";
for(let i=0;i<option.type.length;i++){
if(i!=0){
typeAttr+=",";
}
typeAttr+="#menu .type"+option.type[i];
}
console.log('typeAttr',typeAttr);
let menu = document.querySelectorAll(typeAttr);
if (list.length < 2) {
alert('菜单数量大于1个才能随机选择哦!');
return;
}
let selected=[];
let selectedData;
let selectedElement;
let count=1;
let index;
let doSelect=function () {
allMenu.forEach((item) => {
if(item.attributes.selected.value!='true'){
item.style.color = 'black';
item.style.backgroundColor = '';//'#ffad60';
item.style.border = '1px solid transparent';//'none';
item.classList.remove('hover');
}
});
index = parseInt(Math.random() * menu.length);
let selectedItem=menu[index];
/*while(selectedItem.attributes.selected.value=='true'){
index = parseInt(Math.random() * menu.length);
selectedItem=menu[index];
}*/
selectedItem.style.color = 'red';
selectedItem.style.backgroundColor = '#ffeead';
selectedItem.style.border = '1px solid #FFF000';
selectedElement=selectedItem
selectedData = list[parseInt(selectedItem.attributes.id.value)];
console.log(selectedData);
count++;
}
select.innerText = '';
let time = setInterval(doSelect, 5);
for(let currentCount=1;currentCount<=option.num;currentCount++){
setTimeout(() => {
selectedElement.setAttribute('selected','true');
selected.push(selectedData);
let html="";
let total=0;
for(let i=0;i<selected.length;i++){
let it = selected[i];
html+= '<span>'+it.name+' '+it.price+'元 </span>';
total+=it.price;
}
html+='<span> 总价:'+total+'元,均价'+(total/selected.length).toFixed(2)+'元</span>';
select.innerHTML = html;
clearInterval(time);
if(selected.length < option.num){
time = setInterval(doSelect, 5);
}
console.log('currentCount:'+currentCount+' 随机次数:'+count,selectedData);
}, currentCount*500);
}
});
//删除时元素浮动的动态效果
del.addEventListener('click', function () {
let menu = document.querySelectorAll('#menu .item');
if (menu.length > 0) {
menu.forEach((item) => {
item.classList.add('hover');
});
}
});
//删除菜
box.addEventListener('click', function (e) {
if (e.target.className == 'hover') {
let delList = e.target.innerText;
box.removeChild(e.target);
list.forEach((item, index) => {
if (item == delList) {
list.splice(index, 1);
}
});
}
});
//删除时如果点击其他地方，取消元素的浮动效果
document.addEventListener('click', function (e) {
let isBox = box.contains(e.target);
if (!isBox && e.target.className !== 'del') {
let menu = document.querySelectorAll('#menu .item');
menu.forEach((item) => {
item.classList.remove('hover');
});
}
});
};
function getFormValue(divId){//getFormValue('option')
let ret={};
let inputs=document.getElementById(divId).getElementsByTagName('input');
for(let i=0;i<inputs.length;i++){
let el = inputs[i];
let prop=el.name;
if(el.type=='checkbox'){
if(!ret[prop]){
ret[prop] = [];
}
if(el.checked){
ret[prop].push(el.value);
}
}else if(el.type=='text'){
ret[prop]=el.value;
}else if(el.type=='number'){
ret[prop]=el.value;
}else{
console.log('不支持input type: '+el.type)
}
}
return ret;
}
//离开页面时进行缓存
/*window.onbeforeunload = function () {
localStorage.setItem('List', JSON.stringify(list));
};*/
</script>
</html>
07-26
1825
1825
07-26
6万+
6万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
