在线抽奖随机选取自动挑选

浏览：2022次- 评论：0次- 发布时间：2018-05-29

Html

Css

随机抽奖系统



    
    
        中奖者名单

// 模拟后台数据
 var arr = ["吉帆", "静慧", "嘉歆", "金枝", "王大妈", "老王", "刘疙瘩", "杨伟", "韩晁", "静涵",
     "静曼", "晶晶", "靓影", "嘉宝", "李静", "李志", "李伟", "家美", "玉叶", "静恬", "刘泽祥",
     "静和", "晶灵", "立超", "嘉懿", "王欢", "王欣", "郭琦", "嘉美", "王琦", "洁静", "小杨",
     "佳思", "吉玉", "张焕", "张赛", "娟秀", "菊月", "王晶", "吉玟", "王飞", "皎洁", "曾艳",
     "王翠青"
 ];

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
 }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.10.2

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：实现随机抽取人，抽取不重复人，直至结束

使用说明：

1 后台预置需要抽奖的人

2 点击开始会将抽取结果放到中奖名单之中

3 抽取过的人，下次抽取不在会选中，从而实现了不重复抽取

4 刷新之后，即可方便下一次抽取

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

在线抽奖 随机选取 自动挑选

随机抽奖系统

中奖者名单

使用说明：

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

在线抽奖随机选取自动挑选