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

Html

Css

随机抽奖系统



    
    
        中奖者名单

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;
}

// 模拟后台数据
 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

立即下载

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



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

使用说明：
1 后台预置需要抽奖的人
2 点击开始会将抽取结果放到中奖名单之中
3 抽取过的人，下次抽取不在会选中，从而实现了不重复抽取
4 刷新之后，即可方便下一次抽取

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

fengguoyousheng

相关代码

随机抽奖系统

中奖者名单