下载： 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简单随机抽奖页面（在线抽奖、随机选取、自动挑选）的更多相关文章

  1. socket.io简单说明及在线抽奖demo

    socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...

  2. 抽奖随机算法的技术探讨与C#实现

    一.模拟客户需求 1.1 客户A需求:要求每次都按照下图的概率随机,数量不限,每个用户只能抽一次,抽奖结果的分布与抽奖概率近似. 1.2 客户B需求:固定奖项10个,抽奖次数不限,每个用户只能抽一次, ...

  3. 面试中常问的有关随机选取k个数的总结

    1.在半径为1的圆中随机选取一点. 2.给定一个未知长度的整数流,如何随机选取一个数 3.给定一个数据流,其中包含无穷尽的搜索关键字(比如,人们在谷歌搜索时不断输入的关键字).如何才能从这个无穷尽的流 ...

  4. H5页面设计器，仿有赞商城页面在线设计器，比富文本框更友好的内容编辑器

    基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...

  5. [置顶] ios 在一定选项范围随机选取选项demo

    原创文章,转载请注明出处:http://blog.csdn.net/donny_zhang/article/details/9408285 demo功能:ios 在一定范围随机选取demo,如截屏.在 ...

  6. 从MySQL随机选取数据

    --从MySQL随机选取数据 -------------------------2014/06/23 从MySQL随机选取数据最简单的办法就是使用”ORDER BY RAND()”; 方案一: SEL ...

  7. 接口测试入门（4）--接口自动化测试框架 / list和map用法 / 随机选取新闻 （随机数生成） / 接口相关id映射

    一.接口自动化测试框架 为了更好的组织测试方法,测试用例并且持续集成,我们选择了  java+testNG(测试用例组织)+gitlab(代码版本管理)+Jenkins(持续集成工具) 作为一整套的自 ...

  8. Py之Crawler：爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹——Jason niu

    #Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹 import urllib.request import os import random def ...

  9. 从n个数中随机选取m个

    咋一看,这是个很简单的问题,但是如果n是个不确定的数呢?比如服务器每天会收到数以亿计的请求,但是目前服务器端不希望保存所有的请求,只想随机保存这些请求中的m个.试设计一种算法,能够使服务器实时保存m个 ...

随机推荐

  1. 【分布式】ZooKeeper权限控制之ACL(Access Control List)访问控制列表

    zk做为分布式架构中的重要中间件,通常会在上面以节点的方式存储一些关键信息,默认情况下,所有应用都可以读写任何节点,在复杂的应用中,这不太安全,ZK通过ACL机制来解决访问权限问题,详见官网文档:ht ...

  2. jenkins之分布式

    在jenkins的slave节点安装jdk(注:slave节点不需要安装jenkins) #:安装jdk环境 root@ubuntu:/usr/local/src# ls jdk-8u191-linu ...

  3. "delete this" in C++

    Ideally delete operator should not be used for this pointer. However, if used, then following points ...

  4. 【Java基础】ArrayList初始化操作

    要用60个零初始化列表,请执行以下操作: List<Integer> list = new ArrayList<Integer>(Collections.nCopies(60, ...

  5. MySQL数据库字段加密

    一.导入表结构 USE `qskj_03`; /*Table structure for table `test` */ DROP TABLE IF EXISTS `test`; CREATE TAB ...

  6. python解释器安装指导教程

    python解释器安装指导教程 1.官网下载 进入官网https://www.python.org/,在download下选择符合操作系统的版本 在找到合适的版本后选择相应的安装文件下载 2.进行安装 ...

  7. 象群游牧算法--EHO

    象群游牧算法的数学模型 象群的游牧行为非常复杂,但是其中一些行为可以帮助我们寻找全局最优解和局部最优解.对此,进行数学建模为: (1) 象群的每个部落都有固定数目的大象: (2) 每次迭代中,部落中都 ...

  8. [BUUCTF]PWN14——not_the_same_3dsctf_2016

    [BUUCTF]PWN14--not_the_same_3dsctf_2016 题目网址:https://buuoj.cn/challenges#not_the_same_3dsctf_2016 步骤 ...

  9. 工期设定（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 任务录入好以后,就得安排工期了不是,要不然每一个任务都如自动设置的从今天开始一个工作日内完成,这么简单的话,还要Proje ...

  10. Mac 远程上传文件到 Linux

    打开Mac自带终端: 在最顶端选择Shell ->新建远程连接: 选择sftp连接,填好服务器地址: 连接成功后.上传文件,使用 put 命令: put 本地文件路径 远程主机路径