html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）_杨明金_在线抽奖网页

大大的周 02-07 1494

下载： https://download.csdn.net/download/weixin_44893902/20366745

效果：

代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>在线抽奖随机选取自动挑选</title> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> body { background-color:aliceblue; } .wrapDiv { width:80%; max-width:1200px; margin:0 auto; text-align:center; position:absolute; top:80px; left:0; right:0; } .leftBox { float:left; width:800px; height:240px; /*background-color:aqua; */ margin:0 auto; margin-top:0px; clear:both; } #span { float:right; top:30px; right:185px; } #btn { float:left; width:100px; height:30px; margin-left:10px; margin-top:150px; } .nameBox { width:100px; height:30px; float:left; background-color:antiquewhite; margin-left:10px; margin-top:10px; text-align:center; line-height:30px; } .selectedName { float:right; width:340px; background:#666; margin-top:10px; margin-left:30px; background:#ffffff; overflow:hidden; } h1 { text-align:center; } </style> </head> <body> <h1>随机抽奖系统</h1> <span id="span"></span> <div class="wrapDiv"> <div id="leftBox" class="leftBox"></div> <div id="selectedName" class="selectedName"> <h1>中奖者名单</h1> </div> <input type="button" id="btn" value="开始走起"> </div> <script> // 模拟后台数据 var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "22", "23", "24", "25", "26", "27", "28", "29", "30", ]; var orgArrCount = arr.length; var currentSelectNum = 0; initForm(); // 初始化表单 function initForm() { // 动态设置选择人的高度 var selectedNameHeight = orgArrCount / 3 * 40 + 120; $("#selectedName").css("height", selectedNameHeight + "px"); // 动态创建图层 dynamicCreateBox(); } // 动态创建层 function dynamicCreateBox() { for (var i = 0; i < arr.length; i++) { var div = document.createElement("div"); div.innerText = arr[i]; div.className = "nameBox"; $("#leftBox").append(div); }; } // 清空小方格颜色 function clearBoxColor() { $("#leftBox").children("div").each(function() { $(this).css("background-color", ""); }); } // 设置选中小方格颜色 function setBoxColor() { $("#leftBox").children("div").each(function() { var thisText = ($(this).text()); var selectedName = arr[currentSelectNum]; if (thisText == selectedName) { $(this).css("background-color", "red"); } }); } function appendSelectedName() { var div = document.createElement("div"); div.innerText = arr[currentSelectNum]; div.className = "nameBox"; $("#selectedName").append(div); } $('#btn').click(function() { var curentCount = arr.length; if (curentCount < 1) { alert("没有可选人了"); // 清空所有层的颜色 clearBoxColor(); return; } // 监视按钮的状态 if (this.value === "开始走起") { // 定时针 timeId = setInterval(function() { // 清空所有层的颜色 clearBoxColor(); //随机生成一个数 var num = Math.floor(Math.random() * curentCount); currentSelectNum = num; // 设置选中小方格颜色 setBoxColor(); }, 10); this.value = "停止"; } else { // 清除计时器 clearInterval(timeId); // 添加选中人 appendSelectedName(); // 移除 arr.splice(currentSelectNum, 1); this.value = "开始走起"; } }); // 获取时间的函数 getTime(); setInterval(getTime, 10) function getTime() { var day = new Date(); var year = day.getFullYear(); //年 var month = day.getMonth() + 1; //月 var dat = day.getDate(); //日 var hour = day.getHours(); //小时 var minitue = day.getMinutes(); //分钟 var second = day.getSeconds(); //秒 month = month < 10 ? "0" + month : month; dat = dat < 10 ? "0" + dat : dat; hour = hour < 10 ? "0" + hour : hour; minitue = minitue < 10 ? "0" + minitue : minitue; second = second < 10 ? "0" + second : second; $("#span").innerText = year + "-" + month + "-" + dat + " " + hour + ":" + minitue + ":" + second } </script> </body> </html>