简单抽奖机系统（中午吃什么？）

最新推荐文章于 2024-05-29 10:53:24 发布

杨羊羊咩咩～

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量722

点赞数 2

分类专栏： html 前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48700248/article/details/121343839

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

简单抽奖机系统（中午吃什么？）

- html和css部分：

#本来是写给我们宿舍的抽奖系统，因为纠结不知道每天中午到底吃什么，哈哈哈，希望大家先点赞收藏再借鉴哦！！

html和css部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 .box{
				 width: 800px;
				 height: 800px;
				 border: 1px solid red;
				 margin: auto;
				 text-align: center;
			 }
			 .box>div{
				 width: 300px;
				 height: 300px;
				 background-color: #87CEEB;
				 border-radius: 50%;
				 margin: auto;
				 line-height: 300px;
				 color: white;
				 font-size: 30px;
				 font-weight: bold;
				 margin-top: 50px;
			 }
			 .box >a{
				 text-decoration: none;
				 font-size: 20px;
				 display: inline-block;
				 background-image:linear-gradient(to right,skyblue,yellow) ;
				 width: 200px;
				 height: 50px;
				 border-radius: 20px;
				 line-height: 50px;
				 color: white;
				 margin: 30px;
				 
			 }
			 .bg-red{
				 background-color: #FF0000;
			 }
			 .bg-green{
				 background-color: greenyellow;
			 }
			 
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content" id="content">奖品</div>
			<a href="#" onclick="run();" id="start">开始抽奖</a>
		</div>
		
		
	<script>
		//定义一个数组来存储奖品
		
		const goods=["麻辣烫","鱼粉","麻辣拌","干锅煎肉饭","波波鱼","螺蛳粉","砂锅","骨汤烩菜","新疆炒米粉","香锅","意面","米饭","三秦面","盖浇饭","椒麻鸡","粗粮面","武汉热干面","面皮","肉夹馍","后门鸡汤米线","胖阿姨卷饼"];
		let flag=true;
		let content=document.getElementById("content");
		let start=document.querySelector("#start");
		let timer;
		
		function run(){
			if(flag){
				flag=false;
				start.textContent="停止抽奖";
				// content.style.backgroundColor="red";
				
				content.className="bg-red";
				timer=window.setInterval(function (){
			//随机一个 0--goods.lengtj-1
			// let index=Math.random()*goods.length;
			let index=Math.floor(Math.random()*goods.length);
			let g=goods[index];
			content.textContent=g;
			},10);
			
			}else{
				flag=true;
				start.innerText="开始抽奖";
				content.className="bg-green";
				window.clearInterval(timer);
			}
			
		}
	
	
	
	</script>
	</body>
</html>

效果图展示：

在这里插入图片描述

杨羊羊咩咩～

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单抽奖机系统（中午吃什么？）

简单抽奖机系统（中午吃什么？）html和css部分：#本来是写给我们宿舍的抽奖系统，因为纠结不知道每天中午到底吃什么，哈哈哈，希望大家先点赞收藏再借鉴哦！！html和css部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width:
复制链接

扫一扫