<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线抽奖 随机选取 自动挑选</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
body {background-color: aliceblue;font-family: Arial, sans-serif;margin: 0;padding: 0;
}
.wrapDiv {width: 100%;max-width: 1200px;margin: 0 auto;text-align: center;padding: 10px;
}
.leftBox {width: 100%;max-width: 800px;margin: 0 auto;margin-top: 20px;
}
#span {float: right;margin-top: 10px;margin-right: 10px;
}
#btn {width: 200px;height: 80px;text-align: center;line-height: 80px;margin-top: 20px;background: linear-gradient(to right, #ff0000, #ff9900, #ffff00, #33cc33, #3399ff);color: #28773b8e;font-size: 24px;font-weight: bold;border: none;cursor: pointer;
}.nameBox {width: calc(33.33% - 20px);height: 60px;margin: 10px;text-align: center;line-height: 60px;font-size: 14px;float: left;
}
.nameBox:nth-child(1) {background-color: #f44336; /* 红色 */
}.nameBox:nth-child(2) {background-color: #9c27b0; /* 紫色 */
}.nameBox:nth-child(3) {background-color: #2196f3; /* 蓝色 */
}.nameBox:nth-child(4) {background-color: #4caf50; /* 绿色 */
}.nameBox:nth-child(5) {background-color: #ff9800; /* 橙色 */
}.nameBox:nth-child(6) {background-color: #ffeb3b; /* 黄色 */
}.nameBox:nth-child(7) {background-color: #00bcd4; /* 青色 */
}.nameBox:nth-child(8) {background-color: #e91e63; /* 桃红色 */
}.nameBox:nth-child(9) {background-color: #8bc34a; /* 浅绿色 */
}.nameBox:nth-child(10) {background-color: #607d8b; /* 钢蓝色 */
}.nameBox:nth-child(11) {background-color: #673ab7; /* 深紫色 */
}.nameBox:nth-child(12) {background-color: #ff5722; /* 橙红色 */
}.nameBox:nth-child(13) {background-color: #3f51b5; /* 中蓝色 */
}.nameBox:nth-child(14) {background-color: #795548; /* 暗褐色 */
}.nameBox:nth-child(15) {background-color: #009688; /* 深绿色 */
}.nameBox:nth-child(16) {background-color: #ff4081; /* 粉红色 */
}.nameBox:nth-child(17) {background-color: #9e9e9e; /* 灰色 */
}.nameBox:nth-child(18) {background-color: #ffc107; /* 金黄色 */
}.nameBox:nth-child(19) {background-color: #cddc39; /* 青绿色 */
}.nameBox:nth-child(20) {background-color: #03a9f4; /* 亮蓝色 */
}.nameBox:nth-child(21) {background-color: #ff1744; /* 鲜红色 */
}
.selectedName {width: 100%;margin-top: 20px;padding: 10px;background-color: #ffffff;overflow-y: scroll;
}h1 {text-align: center;margin-top: 30px;font-size: 24px;
}@media screen and (max-width: 768px) {.nameBox {width: calc(50% - 20px);}
}@media screen and (max-width: 480px) {.nameBox {width: calc(100% - 20px);}
}
</style>
</head>
<body>
<h1>随机抽奖系统</h1>
<span id="span"></span><div class="wrapDiv"><div id="leftBox" class="leftBox"></div><div id="selectedName" class="selectedName"><h2>礼物库</h2><!-- 中奖者名单内容将动态添加 --></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",
];var orgArrCount = arr.length;
var currentSelectNum = 0;initForm();// 初始化表单
function initForm() {// 动态设置选择人的高度var selectedNameHeight = orgArrCount / 3 * 40 + 200;$("#selectedName").css("max-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 currentCount = arr.length;if (currentCount < 1) {alert("所有奖项已抽完");// 清空选项框颜色clearBoxColor();return;}// 按钮状态监视if (this.value === "开启幸运之旅") {// 定时器timeId = setInterval(function() {// 清空选项框颜色clearBoxColor();// 随机生成数值var num = Math.floor(Math.random() * currentCount);currentSelectNum = num;// 设置选中选项框颜色setBoxColor();}, 50);this.value = "停止";} else {// 清除计时器clearInterval(timeId);// 添加中奖者appendSelectedName();// 删除选项arr.splice(currentSelectNum, 1);this.value = "开启幸运之旅";}
});// 获取时间
getTime();
setInterval(getTime, 1000);function getTime() {var day = new Date();var year = day.getFullYear(); //年var month = day.getMonth() + 1; //月var date = day.getDate(); //日var hour = day.getHours(); //小时var minute = day.getMinutes(); //分钟var second = day.getSeconds(); //秒month = month < 10 ? "0" + month : month;date = date < 10 ? "0" + date : date;hour = hour < 10 ? "0" + hour : hour;minute = minute < 10 ? "0" + minute : minute;second = second < 10 ? "0" + second : second;$("#span").text(year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second);
}
</script></body>
</html>
![[算法题]重排字符串](https://i-blog.csdnimg.cn/direct/ddadc06c6e89481dbcf921e89e6950b5.png)
