<!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>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html随机抽奖</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .content { width:456px; margin:0 auto; text-align:center; font-weight:800; } .kuai { width:150px; height:150px; float:left; line-height:150px; border:1px solid #666; } .button { width:456px; margin:0 auto; text-align:center; } .choujiang { border:none; color:#fff; background-color:#5cb85c; border-radius:4px; font-size:20px; color:#fff; padding:5px 20px; margin-top:20px; cursor:pointer; } .choujiang:hover { background-color:red; } </style> </head> <body> <div class="content"> </div> <div class="button"> <button type="button" class="choujiang">抽奖</button> </div> <script> //请在此段代码前引用jq,否则代码无效 $(document).ready(function() { var name = ['飞机', '大炮', '火箭', '游艇', '电脑', '键盘', '鼠标', '谢谢参与', '三年模拟两年高考'] for (var i = 1; i <= name.length; i++) { $(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>'); } $('.choujiang').on('click', function() { $(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态 var sum = name.length; var le = 3 //设置滚动多轮 var hh = sum * le; var y = 1; var x = hh; var times = 12; //调节滚动速度 var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数 var i = Math.ceil(rand / sum); //向上取整 for (var i = i; i < le; i++) { rand = rand + sum } time(1, rand, times, sum, times) //点击按钮后触发time事件 }) }); function time(shu, sums, tie, sum, tis) { //倒计时 var tie = tie + tis //滚动速度 setTimeout(function() { if (shu <= sums) { $('.kuai').css({ 'background-color': '', 'color': '' }) //清除css $('#' + shu + '').css({ 'background-color': 'aqua', 'color': '#fff' }) //添加css样式 if (shu == sum) { sums = sums - shu shu = 0; } shu++ text(shu, sums, tie, sum, tis) } else { $('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态 } }, tie); } function text(shu, sums, tie, sum, tis) { time(shu, sums, tie, sum, tis) //执行time事件 } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机点菜名</title> <style> /* 初始化页面，清除所有元素的内外边距 */ * { padding: 0; margin: 0; /* 设置背景颜色为414141 */ background-color: #414141; } /* 盒子居中 */ div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /* 使用上期视频的文字渐变效果，再加一点点文字阴影 */ span, h2 { text-shadow: 0 0 10px #dfd8d8; background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: ff 0.9s linear infinite; } @keyframes ff { to { filter: hue-rotate(360deg); } } /* 设置一下字体大小 */ h2 { font-size: 72px; } span { font-size: 46px; } /* 按钮居中 */ button { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 25px; box-shadow: 0 0 10px #fff; /* 取消轮廓线 */ outline: none; background-color: gray; } </style> </head> <body> <div> <h2>随机点菜名</h2> <span id="name"></span> </div> <p/><button id="button_text">stop</button> <script> // 获取标签 let nametxt = document.getElementById('name'); let button = document.getElementById('button_text'); // 创建一个数组存储名字 let uname = ['阿阳热爱前端', '郝嘉慧', '冬灰条', '蒸羊羔儿', '蒸熊掌', '蒸鹿尾儿', '烧花鸭', '烧雏鸡', '烧子鹅', '炉猪', '炉鸭', '酱鸡', '腊肉', '松花', '小肚儿', '晾肉', '香肠儿', '什锦苏盘儿', '熏鸡白肚儿', '清蒸八宝猪', '江米酿鸭子', '罐儿野鸡', '罐儿鹌鹑', '卤什件儿', '卤子鹅', '山鸡', '兔脯', '菜蟒', '银鱼', '清蒸哈什蚂', '烩鸭腰儿', '鸭条', '清拌腰丝儿', '黄心管儿']; // 创建一个函数生成随机数字 function getrandom(min, max) { return Math.floor(Math.random() * (max - min - 1) + min); } function clock() { // 通过获取一个随机的数组下标实现随机获取一个名字，并将这个名字赋值给变量random let random = uname[getrandom(0, uname.length - 1)]; //将random塞到span里 nametxt.innerHTML = random; }; // 打印名字已经实现了，下一步让没点击按钮前名字一直刷新 // 设置不停止时名字的刷新速度为30毫秒 let time = self.setInterval("clock()", 30); // 将开始与停止按钮绑定到按钮上，并通过按钮控制 let flag = false; button.onclick = function () { // 当flag标志为false时，点击按钮让刷新停止； if (flag == false) { time = window.clearInterval(time); // 按钮文字从stop变为start； button.innerHTML = 'start'; // 标志变更 flag = true; } else { // 当flag标志为true时，开始刷新，文字变更 time = self.setInterval("clock()", 30); button.innerHTML = 'stop'; flag = false; } } </script> </body> </html>
