一个简单的html抽奖

最新推荐文章于 2025-06-03 15:22:54 发布

丿天灬乄一丶

最新推荐文章于 2025-06-03 15:22:54 发布

阅读量3.2k

点赞数 1

本文介绍了一个简单的抽奖程序的设计与实现过程，使用HTML和JavaScript构建界面与交互逻辑。该程序包括操作说明、抽奖区域及中奖名单展示等功能，并通过键盘事件触发抽奖逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			@font-face {
				font-family:"myfont";
				src: url('font/FZLTXHJW.TTF');
			}
			body{
				background-color: deepskyblue;
				margin: 0;
				padding: 0;
				font-family: myfont;
			}
			.left{
				float: left;
				text-align: center;
				min-width: 100px;
				min-height: 900px;
			}
			.center{
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -512px;
				width: 1024px;
				height: 614px;
				background: url(img/bg.jpg) no-repeat;
			}
			.right{
				float: right;
				min-width: 100px;
				min-height: 900px;
			}
			ol{
				font-size: 1.2em;
				line-height: 50px;
			}
			li{
				line-height: 40px;
			}
			.footer{
				clear:both;/*清除浮动*/
				position: relative;
				width: 100%;
				min-width: 1024px;
				height: 40px;
				background-color: rgb(255, 140, 59);
				text-align: center;
			}
			span{
				line-height: 40px;
				letter-spacing: 3px;
			}	
			.title{
				font-size: 1.8em;
				position: relative;
				letter-spacing: 4px;
				top: 12%;
			}
			.name{	
				position: relative;
				top: 40%;
				
			}
			.name span{
				font-size: 2em;
				letter-spacing: 4px;
				padding: 20px 30px;
				width: 200px;
				color: #FFF;
				border: 1px solid deepskyblue;
				-webkit-user-select: none;		
			}
			.name span:hover{
				cursor: pointer;
			    font-size: 2.4em;
			}
		</style>
	</head>
	<body>
		<div class="left">
			<ol>操作说明
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<div class="center">
			<div class="title">
				<span>抽奖</span>
			</div>
			<div class="name">
				<span id="show-box">
					ENTER键开始
				</span>
			</div>
		</div>
		<div class="right">
			<ol id="list">抽中名单
			</ol>
		</div>
		<div class="footer">
			<span>rhs</span>
		</div>
	</body>
	<script>
		//数据
		var names = ['name1',
			'name2',
			'name3',
			'name4',
			'name5',
		];
		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);
				//增加样式(动画)
				$('show-box').className='tip';
				//标记滚动状态为停止
				isBegin = false;
			} else {
				//开始
				//先判断数组中人数是否已达到3人
				if(luckers.length < 3) {
					//启动抽取每隔0.05秒刷新界面内容
					intavlflag = setInterval(begin, 50);
					//去除样式（停止动画）
					$('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>
</html>