抽奖的小程序

最新推荐文章于 2024-07-04 13:04:52 发布

我是你的春哥！

最新推荐文章于 2024-07-04 13:04:52 发布

阅读量867

点赞数 1

文章标签：小程序 css html 1024程序员节

本文链接：https://blog.csdn.net/liuliuhelingdao/article/details/127470397

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style>

			.bg{
				position: absolute;
				left 0;
				right: 0;
				top: 0;
				bottom: 0;
				min-height: 640px;
				width: 100%;
				background-color: #FFCE43;	
				text-align: center;	
			}
			.imgsize{
				position: absolute;
				left: 50%;
				margin-left: -512px;	
				background-image: url('/homework/img/bg.jpg');
				min-height: 600px;
				min-width: 1024px;
			}
			.explain-left{
				width: 165px;
				height: 640px;	
				float: left;		
			}
			.explain-right{
				width: 165px;
				height: 640px;
				float: right;
			}
			.footsize{
				clear: both;
				height: 20px;
				background-color: #FFCE43;	
				font-size: 1.1em;
				font-style: italic;
			}
			li{
				display: inline-block;
				width: 100%;
				height: 100%;
				color:#000;
				text-decoration: none;
				text-align: center;
				line-height:40px;
				font-family: "微软雅黑";
				font-size: 1.1em;
			}
			span{
				display: inline-block;
				width: 100%;
				height: 100%;
				color:#000;
				text-decoration: none;
				text-align: center;
				line-height:40px;
				font-family: "微软雅黑";
				font-size: 1.6em;
				margin-top: 10%;
			}
			#code-box{
				margin-top: 60px;
				display: inline-block;
				padding:0.5em 1em;
				color:#fff;
				letter-spacing: 4px;
				font-size: 1.2em;
				
				/*禁止用户选择*/
				-webkit-user-select: none;/*兼容webkit内核*/
				-moz-user-select: none;/*兼容firefox浏览器*/
				-ms-user-select: none;/*兼容ie*/
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="explain-left">
				<ul>
					<li>操作说明</li>
					<li>1.回车开始抽取</li>
					<li>2.再次回车暂停</li>
					<li>3.3次抽取后结束</li>
					<li>4.ESC键重新抽取</li>
				</ul>
			</div>
			<div class="imgsize">
				<span>辩论赛名单</span>
				<div id="code-box" title="点击切换">按ENTER开始滚动</div>
			</div>
			<div class="explain-right">
				<ul>
					<li>抽取名单</li>
					<li id="out1"></li>
					<li id="out2"></li>
					<li id="out3"></li>
				</ul>
			</div>
			<footer class="footsize">
				软帝集团版权所有&copy;MrSun
			</footer>
		</div>
		<script>
			var names = ['万曾辉',
				'付一帆',
				'余子杨',
				'关健',
				'刘凯',
				'刘孟',
				'刘晓龙',
				'刘聪',
				'刘菊香',
				'吴为',
				'唐帅',
				'孙一飞',
				'孙维杰',
				'宋鹏凯',
				'尹雪枫',
				'廖立文',
				'张笛',
				'徐超',
				'戴文博',
				'方煜',
				'方超',
				'曲胜健',
				'朱文洋',
				'李宏昌',
				'李莹莹',
				'李运',
				'杨黎',
				'殷逸',
				'汤九',
				'熊业超',
				'王一品',
				'王峰',
				'王文康',
				'瞿俊松',
				'董博斯',
				'董启龙',
				'蒋金星',
				'蔡为',
				'蔡旋月',
				'邓修缘',
				'郭伟',
				'阮汉顺',
				'陈帅',
				'陈铭',
				'魏东',
				'黄亚平',
				'黄正戟',
				'黄远胜',
				'韩雪'
			];
			var name_out = new Array();
			//获取指定id的元素
			var box = document.getElementById('code-box');
			var box1 = document.getElementById('out1');
			var box2 = document.getElementById('out2');
			var box3 = document.getElementById('out3');
			var isrunning = true;
			var a;
			var i = 1;
			
			document.οnkeydοwn=function(e){
				switch(e.keyCode){
					case 13:
				 		begin();
						break;
					case 27:
						restart();
						break;
				}	
			};
			
			function restart(){
				names = names.concat(name_out);
				name_out = new Array();
				box.innerHTML = '按ENTER开始滚动';
				i = 1;
				box1.innerHTML = '';
				box2.innerHTML = '';
				box3.innerHTML = '';
			}
			
			function begin(){
				if(i <= 3){
					if(isrunning){
						a = window.setInterval(genCode,20);
						isrunning = false;
					}else{
						var id = genCode();
						var name = names[id];
						inner(name, i);
						name_out.push(name);
						names.splice(id, 1);
						console.info('所有人:' + names);
						console.info('抽取的人:' + name_out);
						clearInterval(a);
						isrunning = true;
						i++;
					}
				}else{
					alert('抽取结束!');
					console.info('所有人:' + names);
					console.info('抽取的人:' + name_out);
				}
						
			}
			
			function inner(name, i){
				if(i == 1){		
					box1.innerHTML = name;
				}
				if(i == 2){
					box2.innerHTML = name;
				}
				if(i == 3){
					box3.innerHTML = name;
				}
			}
			function genCode(){
				var code = '';
				var index = Math.floor(Math.random()*names.length);
				code = names[index];
				//将生成的验证码写入指定的位置
				box.innerHTML=code;
				return index;
			}			
		</script>
	</body>
</html>

该代码片段是用html,css,JavaScript编写的一个抽奖小程序。

功能：1.能够随机抽取3个名字。

2.按ENTER开始，ENTER结束，3次抽取之后即不能抽取。

3.按ESC即可重新开始抽取。

本程序的重点在于判断语句，首先得判断是否在运行抽奖，如果在运行则按ENTER的时候就得将其关闭，反之亦然。第二个判断是次数的判断，当抽取到第三次的时候就该结束抽取，再次按ENTER的时候弹出提示框。数组的内容难度不大，从原数组将抽取到的人移除并放入新数组。如果按ESC重新开始时，将这两个数组拼接即可。