html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）

明金同学

已于 2024-12-11 14:14:24 修改

阅读量10w+

点赞数 38

分类专栏： HTML5 JS 文章标签： html js css3 css jquery

于 2021-07-19 16:27:28 首次发布

本文链接：https://blog.csdn.net/weixin_44893902/article/details/118900551

版权

JS 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML5

11 篇文章

订阅专栏

下载： 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>

这个是随机选中，也可以改变一下代码设置某些序号被排除。
添加新的排除数组 exclusionArr 里面放需要排除的。
$('#btn').click(function()这里的方法改一下

// 新的排除数组
var exclusionArr = ["02", "04", "06"]; // 在这里添加不应该被选中的号码

$('#btn').click(function() {
    var curentCount = arr.length;
    if (curentCount < 1) {
    	// 清空所有层的颜色
        alert("没有可选人了");
        clearBoxColor();
        return;
    }
    // 监视按钮的状态
    if (this.value === "开始走起") {
   		// 定时针
        timeId = setInterval(function() {
        	// 清空所有层的颜色
            clearBoxColor();
			// —————————下面的代码是之前代码的改变部分———————————
            var num;
            var selectedName;
            do {
                num = Math.floor(Math.random() * curentCount);
                selectedName = arr[num];
            } while (exclusionArr.includes(selectedName)); // 继续选择直到找到一个不在排除列表中的号码

            currentSelectNum = num;
            // ——————————————————————————————————————————————
            // 设置选中小方格颜色
            setBoxColor();
        }, 10);
        this.value = "停止";
    } else {
  		// 清除计时器
        clearInterval(timeId);
        // 添加选中人
        appendSelectedName();
        // 移除
        arr.splice(currentSelectNum, 1);
        this.value = "开始走起";
    }
});