作者：xcLeigh
文章地址：http://iyenn.com/rec/1676297.html

---

html实现名字滚动年会抽奖(附源码) html实现好看年会抽奖，奖项分为，特等奖（3人），一等奖（5人），二等奖（10人），三等奖（20人），每个奖项有独立的奖品展示，如果已抽奖，会显示抽奖的用户信息，如果没有抽奖，界面会有抽奖按钮，点击抽奖开始酷炫抽奖，员工信息不停滚动闪烁，当停止抽奖的时候，提示中奖的员工信息（名字+工号）。

1.html实现年会抽奖设计思路

1.1 抽奖主界面

主界面左侧展示的是员工信息（员工名称+员工编号），右侧是此次活动的奖项，特等奖：3人；一等奖：5人；二等奖：10人；三等奖：20人。

1.2 特等奖抽奖界面

点击上方的特等奖进入的界面，点击开始按钮，开始抽奖，具体效果，参照下面的动态效果展示。点击结束，就显示中奖人员信息。

1.2 单个抽奖中奖界面

这是中了特等奖的员工信息。

1.3 一次全抽，中奖界面

这是所有中了特等奖的员工信息。点击返回，继续抽取别的奖品。

2.动态效果及代码

2.1 抽奖界面动态效果展示

特等奖和一等奖的抽奖方式是，一个一个的出，由领导说开始，然后点击开始抽奖，领导说抽奖，然后点击结束，界面会出现一个中奖的用户信息。
二等奖和三等奖的抽奖方式是，一次全部抽出中奖用户，中奖的信息记录在缓存里面，不清缓存，一直存在，清除缓存就可以重新抽奖。

2.2 界面代码

这里只展示了主界面的html代码，更多代码见文章底部的 源码下载,里面有详细的代码说明和备注。

	
	 
	
    
    
     
	
	
	


	
	

		

			
			

				

					

						
恭 喜 以 下 员 工 中 奖
					
					

						

							

								
							
							

								
							
						
					
				
			
			
			

				

					

						
抽 奖 名 单
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
					

						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
						
工号
					
				  
			
		
		


			
			

				

					

						开 始
					
					

						返 回
					
					

						详 细
					
				
			
			
			

				
特等奖(3人)
陆游记双人自选线路6天5晚（含机票、酒店、门票）
				
一等奖(5人)
iPhone12Pro（256G）
				
二等奖1(5人)
极米H3投影仪
				
二等奖2(5人)
戴森(Dyson) 吸尘器 V11
				
三等奖1(10人)
任天堂(Nintendo)Switch NS掌上游戏机
				
三等奖2(10人)
乐高(LEGO)积木BUGATTI Chiron
				

			
		
	

源码下载

html实现名字滚动年会抽奖(源码) 点击下载

     ? 关注博主 带你实现畅游前后端

     ? 加入社区 带你体验马航不孤单

     ? 神秘个人简介 带你体验不一样得介绍

     ? 酷炫邀请函 带你体验高大上得邀请

     ① ?提供云服务部署（有自己的阿里云）；
     ② ?提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如?合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 ? 问题请留言（评论），博主看见后一定及时给您答复，???

原文地址：http://iyenn.com/rec/1676297.html（防止抄袭，原文地址不可删除）