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

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

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

html里用js实现随机抽奖,js实现简单随机抽奖的方法
本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: js随机抽奖程序 var alldata = "a,b,c,d,e,f,g,h,i,j,k" v ...
php简单抽奖,php 简单随机抽奖函数的简单示例
这篇文章主要为大家详细介绍了php 简单随机抽奖函数的简单示例,具有一定的参考价值,可以用来参考一下. 对php编写的简单随机抽奖函数感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! /* ...
抽奖随机算法的技术探讨与C#实现
一.模拟客户需求 1.1 客户A需求:要求每次都按照下图的概率随机,数量不限,每个用户只能抽一次,抽奖结果的分布与抽奖概率近似. 1.2 客户B需求:固定奖项10个,抽奖次数不限,每个用户只能抽一次, ...
socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...
Excel随机选取指定数据
指定几个字符,想excel随机从中选取其中的一个 =CHOOSE(INT(5*RAND()+1),2,3,4,19,2) 功能: 从2,3,4,19,2 中随机选取数字解释: RAND()函数能产生 ...
js实现随机选取[10,100)中的10个整数，存入一个数组，并排序。另考虑(10,100]和[10,100]两种情况。...
1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
mysql 随机选择数据_从MySQL随机选取数据
从MySQL随机选取数据最简单的办法就是使用"ORDER BY RAND()"; 方案一: SELECT * FROM `table` ORDER BY RAND() LIMIT ...
Crawler：反爬虫机制之基于urllib库+伪装浏览器+代理访问(代理地址随机选取)+实现下载某网址上所有的图片到指定文件夹
Crawler:反爬虫机制之基于urllib库+伪装浏览器+代理访问(代理地址随机选取)+实现下载某网址上所有的图片到指定文件夹导读基于反爬虫机制之基于urllib库+伪装浏览器+代理访问(代理地 ...
[numpy]random.choice()随机选取内容
概述: 可以从一个int数字或1维array里随机选取内容,并将选取结果放入n维array中返回. 说明: numpy.random.choice(a, size=None, replace=True ...
从n个数中随机选取m个
咋一看,这是个很简单的问题,但是如果n是个不确定的数呢?比如服务器每天会收到数以亿计的请求,但是目前服务器端不希望保存所有的请求,只想随机保存这些请求中的m个.试设计一种算法,能够使服务器实时保存m个 ...

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

效果：

代码：

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

最新文章

热门文章