随机点餐，随机抽签吃饭，可自行输入并删除

最新推荐文章于 2024-09-25 10:17:48 发布
小小唐同学
最新推荐文章于 2024-09-25 10:17:48 发布
阅读量388
点赞数 11
文章标签： css 前端
本文链接：https://blog.csdn.net/Tyy1415926/article/details/136643882
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机点餐</title>
		<style>    
	body{
		background-color: blanchedalmond;
	}	
	.custom-button {  
      display: inline-block;  
      padding: 20px 10px;  
      background-color: darkorange;
      border: none;  
      color: white;  
      text-align: center;  
      font-size: 30px;  
      transition-duration: 0.4s; /* 动画效果 */  
      cursor: pointer;  
	  border-radius: 10px;  
	  width: 200px;
	  
    }  
  
    .custom-button:hover {  
      background-color: coral;  
      color: black;  
    }
	.container {  
	      display: flex;  
	      justify-content: center;  
	      align-items: center;  
	      height: 50vh; /* 垂直全屏 */  
	    }
	#demo {  
        position: absolute; /* 将元素定位到特定位置 */  
        top: 30%;          /* 将元素向上移动50像素 */  
        left: 44%;         
		width: 300px;
    }  
	.demo {  
	        /* 这部分是关于字体的CSS */  
	        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* 使用Arial字体 */  
	        font-size: 50px;                 /* 字体大小为20像素 */  
	        color: burlywood;                  /* 字体颜色为红色 */  
	    } 
	#newName {  
		        padding: 10px;  
		        border: 1px solid #ccc;  
		        border-radius: 4px;  
		        font-size: 16px;  
		    }  
		  
		    /* 按钮样式 */  
	button {  
		        padding: 10px 20px;  
		        background-color: #4CAF50; /* Green */  
		        border: none;  
		        color: white;  
		        text-align: center;  
		        text-decoration: none;  
		        display: inline-block;  
		        font-size: 16px;  
		        margin: 4px 2px;  
		        cursor: pointer;  
		        border-radius: 4px;  
				background-color: blue;  
				color: white;  
				transition: background-color 0.5s ease;
		    }
	.newName{
		position: absolute;
		top: 57%;
    	left: 42%;
	}
	#deleteName{
		padding: 10px;
		border: 1px solid #ccc;  
		border-radius: 4px;  
		font-size: 16px;
	}
	.deleName{
		position: absolute;
		top: 52%;
    	left: 42%;
	}
	.check{
		position: absolute;
		top: 62%;
    	left: 46%;
	}
	.custom-button1 {  
	     display: inline-block;
	     padding: 10px 30px;  
		 background-color: blue;  
		 color: white;  
		 transition: background-color 0.5s ease;
	    }
	.check-button1:hover {
		 background-color: coral;
		 
		}
		</style>
	</head>
	
	<body>
		<div class ="deleName">
		  <input type="text" id="deleteName" placeholder="输入要删除的饭名">
		  <button type="button" onclick="deleteName()">删除饭名</button>
		</div>
		
		<div class="newName">
		  <input type="text" id="newName" placeholder="输入饭名">
		  <button type="button" onclick="addName()">添加饭名</button>
		</div>
		
		<div class="check">
		<button class="custom-button1" type="button" onclick="check()">查看所有饭名</button>
		</div>
		
		<div class="container">
		<button class="custom-button" type="button" onclick="dianming()">开始点名</button>	
		</div>
		
		<div class="name">
		<p id="demo" class ="demo"> 等待点名</p>
		</div>
		
		<script>
			
			var arr = ['黄焖鸡','快餐','凉皮','猪脚饭','鸡排饭','茶香鸡','米线','烤鸭','麻辣烫'];
			
		function deleteName() {
		    var deleteName = document.getElementById("deleteName").value.trim();
		    // 检查要删除的人名是否为空
		    if (deleteName === "") {
		        alert("请输入要删除的饭名");
		        return;
		    }
		
		    // 检查localStorage中是否存在该人名，如果存在则删除
		    if (localStorage.getItem(deleteName) !== null) {
		        localStorage.removeItem(deleteName);
		        alert("删除储存饭名成功");
		    }
		
		    var index = arr.indexOf(deleteName);
		    if (index !== -1) {
		        arr.splice(index, 1);
		        // 保存更新后的数组到本地存储
		        localStorage.setItem("savedNames", JSON.stringify(arr));
		        alert("成功删除！");
		    } else {
		        alert("该饭名不存在！");
		    }
		
		    document.getElementById("deleteName").value = ""; // 清空输入框内容
		}
		
			
			function addName() {  
			  var newName = document.getElementById("newName").value;  
			  
			  // 检查人名是否 
			  if (newName.trim() === "" ){  
			    alert("请输入菜名");  
			    return;  
			  }  
			  
			  // 将人名添加到数组中  
			  arr.push(newName);  
			  
			  alert("添加成功！");  
			  document.getElementById("newName").value = ""; // 清空输入框内容  
			}
			
			
			
			function check(){
			alert(arr.join(' '));
		}
				
			function dianming(){
			let random = Math.floor(Math.random() * arr.length)
			
			document.getElementById("demo").innerHTML= "正在点名.";
			setTimeout(function(){
			            document.getElementById("demo").innerHTML= "正在点名..";  
			        }, 1000); 
			setTimeout(function(){
			            document.getElementById("demo").innerHTML= "正在点名...";  
			        }, 2000);
			setTimeout(function(){
					document.getElementById("demo").innerHTML= "正在点名....";  
					        }, 3000);
			setTimeout(function(){
					document.getElementById("demo").innerHTML= "正在点名.....";  
					        }, 4000);
			setTimeout(function(){  
			            document.getElementById("demo").innerHTML= arr[random];  
			        }, 5000); 
			}
		</script>
	</body>
</html>