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

来源：互联网发布：115会员淘宝编辑：程序博客网时间：2024/06/07 15:38

<!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>

阅读全文

0 0