<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.2/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>http://www.savh.cn/thread-307.htm
转载请注明:Savh.Cn 发表
