原生javascript实现抽奖动画

来源:互联网 发布:h3c防火墙web配置 端口 编辑:程序博客网 时间:2024/03/29 15:32
<!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个divvar 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>