JavaScript入门小案例----抽奖功能的实现

最新推荐文章于 2023-08-02 16:51:03 发布

孤独别醒来°

最新推荐文章于 2023-08-02 16:51:03 发布

阅读量707

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/SinkingDark/article/details/77151813

本文介绍了一个简单的抽奖程序的设计与实现过程，包括HTML页面布局、CSS样式设置及JavaScript逻辑编写。该程序能够实现随机抽取中奖者并展示中奖名单的功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="assets/css/amazeui.min.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}

			.box{
				width: 100%;
				min-height: 854px;
				background-color: #3BB4F2;
			}
			.font1{
				display: inline-block;
				width: 140px;
				min-height: 200px;
				padding: 10px;
				font: 20px/1.6 "楷体";
			}
			.jpg{
				position: absolute;
				top: 0;
				width: 1280px;
				height: 854px;
				margin-left: 140px;
				background-image: url(lottery/img/08.jpg);
			}
			.jpg_fonts{
				text-align: center;
				font: 40px/10 "楷体";
			}
			.jpg_names{
				text-align: center;
				font: 40px/2 "楷体";
			}
			.font2{
				position: absolute;
				top: 0;
				margin-left: 1420px;
				min-width: 140px;
				min-height: 854px;
				padding: 10px;
				background-color: deepskyblue;
				font: 20px/1.6 "楷体";
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="font1">
				操作说明
				<ol>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
				<butttn class="am-btn am-btn-primary" onclick="start()">ON/OFF</butttn>
				<butttn class="am-btn am-btn-success" onclick="reset()">点击重置</butttn>
			</div>
			<div class="jpg">
				<div class="jpg_fonts">抽奖活动</div>
				<div id="names" class="jpg_names">姓名</div>
			</div>
			<div class="font2">
				<h2>中奖名单如下:</h2>
				<ol id="list"></ol>
			</div>
		</div>
		
		<script type="text/javascript">
			var names = ['张三','李四','王二','李逵','刘备','关羽','张飞','黄忠','赵云','魏延','诸葛亮','周瑜','大乔','小乔','黄月英',

				'曹操','董卓','司马懿','荀彧','吕蒙','孙权','孙策','张辽','黄盖','李淑儿','江南','河北','烟雨','柯南'];
			
			var id; // 标记:点击开始停止所需要
			var isBegin = false; // 默认未开始
			var lucker; 
			var luckers = [];
			
			function init(){
				var index = Math.floor(names.length*Math.random());
				lucker = names[index];
				$('names').innerHTML = lucker;
			}

			// 点击开始
//			var id = window.setInterval(init, 100);
			// 点击停止
//			window.clearInterval(id);
			
			function start(){
				if(isBegin){
					clearInterval(id);
					luckers.push(lucker);
					// 动态创建节点
					var li = document.createElement('li');
					li.innerHTML = lucker;
					// 将节点加入ol元素中
					$('list').appendChild(li);
					// 从原数组中移除中奖者
					removeName(names, lucker);
					isBegin = false; // 抽出中奖者,结束,下次再抽时保证isBegin初始为false
				}else{
					// 中奖名单不足3人时
					if(luckers.length < 3){
						id = setInterval(init, 100);
						
						isBegin = true;	// 不足三人 可以开始抽奖						
					}else{
						// 已满3人时,弹出提示
						alert('中奖名额已满,请重置抽奖或退出!');
					}
				}
			}
			
			function reset(){
				names = names.concat('list');
				luckers = [];
				$('list').innerHTML = '';
				$('names').innerHTML = '姓名';
			}
			
			// 从原数组中移除中奖者
			function removeName(arr, name){
				for(var i = 0; i < arr.length; i++){
					if(arr[i] == name){
						arr.splice(i, 1);
						break;
					}
				}
			}
			
			function $(id){
				return document.getElementById(id);
			}
		</script>
	</body>
</html>