<!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 - shushu = 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() {// 通过获取一个随机的数组下标实现随机获取一个名字，并将这个名字赋值给变量randomlet 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>
