原生javascript实现抽奖动画

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<title>动态增加元素</title>


<style type="text/css">

.son {
width: 100px;
background: palegreen;
float: left;
margin-left: 10px;
margin-bottom: 10px;
text-align: center;
font: bold 15px/100px "微软雅黑";
border-radius: 5px;
}

#parent {
width: 560px;
border: 1px solid #999;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
padding-top: 10px;
}

.btn {
width: 560px;
height: 30px;
margin: 0 auto;
border: 1px solid skyblue;
border-radius: 5px;
text-align: center;
}
.btn input {
margin: 0 20px;
height: 25px;
margin-top: 2px;
}

</style>


<script type="text/javascript">

var stus = ["甲","乙","丙","丁","赵","钱","孙","李"];

window.onload = function() {
// 通过js， 在页面创建5个div


var pdiv = document.getElementById("parent");

for(var i = 0; i < stus.length; i++) {
var dObj = document.createElement("div");
dObj.innerHTML = stus[i];

dObj.className = "son";


pdiv.appendChild(dObj);
}

}

// 声明一个全局变量， 记录当前谁被选中了
var name = "";

function start (obj) {
t = setInterval("choice()", 50);

// 当开始抽奖时， 应该将抽奖按钮 置为不可用，防止用户多次点击
obj.disabled = true;

}

function end () {
if(name == "") {
alert("能先点开始不?");
} else {
clearInterval(t);
alert("恭喜你 " + name + "，你获得了本次活动的特等奖，奖品为");
// 结束时，让开始按钮  可用
document.getElementById("startBtn").disabled = false;
}
}

function choice () {
// 产生一个从0  到 数组长度 -1 范围的随机数: [0, stus.length-1]
var idx = Math.floor(Math.random() * stus.length);

var divs = document.getElementsByClassName("son");

// console.log("当前的索引是：" + idx);

for(var i = 0; i < divs.length; i++) {
if(i == idx) {
divs[idx].style.background = "red";

// 以下代码 2 句的意思相同： 都是记录当前的学生名字
name = divs[idx].innerHTML;
//name = stus[idx];
} else {
divs[i].style.background = "palegreen";
}
}

}

</script>


</head>


<body>

<div class="btn">
<!-- this: 这一个， 界面操作谁， this就指代谁 -->
<input type="button" value="开始抽奖" id="startBtn" onclick="start(this)"/>
<input type="button" value="结束抽奖" onclick="end()" />
</div>


<div id="parent">

</div>

</body>


</html>
原生javascript实现抽奖动画

猜你喜欢
