页面抽奖幸运观众

最新推荐文章于 2023-09-13 15:54:14 发布

MrWangf

最新推荐文章于 2023-09-13 15:54:14 发布

阅读量1.5k

点赞数 2

分类专栏： javascript 文章标签： javascript 抽奖动画音乐字体

本文链接：https://blog.csdn.net/MrWangf/article/details/77151189

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

大家在看节目的时候经常有这样的场景，主持人站在台上大和一声"开始!", 紧接着大屏幕上众多姓名号码就开始飞快滚动，随着主持人的喊停。一位幸运的获奖观众就这样出现了。

小伙伴们, 是不是觉得挺好玩的？之前看到这些场景纯粹觉得很有趣，只是看个热闹，不过近来学习了javascript发现这个抽奖系统实现起来其实并不难。

下面介绍一下实现功能：

回车开始抽取，再次回车结束，3次抽取后结束。
ESC键重新抽取。
伴有动画特效（如：抽取开始前和结束后，字体会由小变大再变小。）
全程bgm（如：抽中一位lucker后，会有相应的背景音乐）

呐，画风如下 :

虾米是具体实现方法：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #3F51B5;
			}
			.aside-left {
				position: absolute;
				left: 0;
				padding: 10px;
			}
			
			ol {
				margin-left: 20px;
			}
			
			ol li {
				padding: 10px 10px;
				font: italic 12pt "myfont";
			}
			
			h2 {
				text-align: center;
			}
			
			.aside-right {
				float: right;
				margin-right: 30px;
			}
			
			.container {
				position: absolute;
				left: 50%;
				margin-left: -512px;
				width: 1024px;
				height: 614px;
				background: url(img/bg.jpg) no-repeat;
			}
			
			.title {
				position: absolute;
				left: 0;
				right: 0;
				top: 2em;
				font: bold 3em "楷体";
				text-align: center;
			}
			
			@font-face {
				font-family: "myfont";
				src: url('font/FZLTXHJW.TTF');
			}
			
			#show-box {
				position: absolute;
				left: 0;
				right: 0;
				top: 50%;
				font: bold 3em "myfont";
				text-align: center;
			}
			
			footer {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				font: italic 12pt "myfont";
			}
			.tip{
				display: inline-block;
				animation: sc 5s infinite linear;
			}
			/*自定义动画*/
			@-webkit-keyframes sc{
				0%{
					transform: scale(1.0);
				}
				50%{
					transform: scale(1.5);
				}
				100%{
					transform: scale(1.0);
				}
			}
		</style>
	</head>

	<body>
		<div class="aside-left">
			<h2>操作说明</h2>
			<ol>
				<li>回车开始抽取</li>
				<li>再次回车暂停</li>
				<li>3次抽取后结束</li>
				<li>ESC键重新抽取</li>
			</ol>
		</div>
		<div class="container">
			<div class="title">
				抽取幸运观众
			</div>
			<div id="show-box">
				<span class="tip">Enter键开始</span>
			</div>
		</div>
		<div class="aside-right">
			<h2>抽中名单</h2>
			<ol id="list">
			</ol>
		</div>
		<footer>
			软帝集团 版权所有&copy; by MRChai
		</footer>
		<!--背景音乐 -->
		<audio src="source/bgm.mp3" autoplay id="bgm" loop="-1"></audio>
		<script>
			// 抽奖姓名数据
			var names = ['李白','杜甫','白居易','王维','苏轼','谢灵运','李清照','谢道韫'];
			var intavlflag; //标记
			var isBegin = false; //是否正在滚动 默认未开始状态
			var lucker; //记录当前幸运儿
			var luckers = []; //存储所有幸运儿
			//全局按键事件
			document.onkeydown = function(e) {
				//获取事件对象中的按键码   13：enter       27：esc
				switch(e.keyCode) {
					case 13:
						//抽取相关
						extract();
						break;
					case 27:
						//将已被抽取的名单合并到源数组中(归还名额)
						names = names.concat(luckers);
						console.info('还原数组:' + names);
						luckers = []; //清空数组
						//清除列表内幸运儿名单
						$('list').innerHTML = '';
						break;
				}
			}

			//抽取准备
			function extract() {
				if(isBegin) {
					//停止
					clearInterval(intavlflag);
					//将幸运儿加入数组
					luckers.push(lucker);
					//动态创建节点
					var li = document.createElement('li');
					li.innerHTML = lucker;
					//将节点加入ol元素中
					$('list').appendChild(li);
					//从源数组移除被抽中的幸运儿
					removeName(names, lucker);
					//改变音效
					$('bgm').src = 'source/cheer.mp3';
					//增加样式(动画)
					$('show-box').className='tip';
					//标记滚动状态为停止
					isBegin = false;
				} else {
					//开始
					//先判断数组中人数是否已达到3人
					if(luckers.length < 3) {
						//启动抽取每隔0.05秒刷新界面内容
						intavlflag = setInterval(begin, 50);
						$('bgm').src = 'source/bgm.mp3';
						//去除样式（停止动画）
						$('show-box').className='';
						//将标志位设置为已启动
						isBegin = true;
					} else {
						alert('人数已满!');
					}
				}
			}

			//从源数组中移除被抽中的幸运儿
			function removeName(arr, name) {
				for(var i = 0; i < arr.length; i++) {
					if(arr[i] == name) {
						arr.splice(i, 1);
						console.info('移除：' + name + '--剩余：' + arr);
						break;
					}
				}
			}

			//开始抽取，随机获取下标
			function begin() {
				var index = Math.floor(Math.random() * names.length);
				lucker = names[index];
				$('show-box').innerHTML = lucker;
			}

			function $(id) {
				return document.getElementById(id);
			}
		</script>
	</body>

</html>

注：

好消息：以上所包含的素材，已上传。。（坏消息：不支持.zip,上传失败。。）
博主尚未习得有关后台jdbc技能，所以目前就是一个前端数组实现，而没有连接后台数据库。

MrWangf

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
页面抽奖幸运观众

大家在看节目的时候经常有这样的场景，主持人站在台上大和一声"开始!", 紧接着大屏幕上众多姓名号码就开始飞快滚动，随着主持人的喊停。一位幸运的获奖观众就这样出现了。小伙伴们, 是不是觉得挺好玩的？之前看到这些场景纯粹觉得很有趣，只是看个热闹，不过近来学习了javascript发现这个抽奖系统实现起来其实并不难。下面介绍一下实现功能：回车开始抽取，再次回车结束，3次抽取后结束。...
复制链接

扫一扫

专栏目录