下载： 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. Angular 组件通信的三种方式

    我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...

  2. spring mvc idea创建

    创建项目 创建项目 --> Spring --> Spring MVC --> 下面选择Download,会显示Spring MVC-5版本 如果是首次使用IDEA,因为没有配置ma ...

  3. jquery datatable真实示例

    1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin ...

  4. 如何使用cURL获得请求/响应具体耗时？

    如何使用cURL一次测量请求和响应时间? cURL支持格式化输出请求的详细信息(请参阅cURL手册页的-w.–write out<format>获取更多信息). 如题,我们将只关注如何知晓 ...

  5. 2、Redis的安装

    一.Windows下Redis安装 下载地址 Redis中文网站 Github地址 1.将下载下来的文件解压到目录 2.双击redis-server.exe运行   出现如下界面证明运行成功 3.双击 ...

  6. 隐藏和显示div的两种方法

    方式一 style="visibility: none;" visiblity:visible -------->可见 visiblity:hidden -------> ...

  7. 文本处理的命令，三剑客之sed

    文本处理的命令 1.sort命令 "用于将文件内容加以排序" 参数: -n :按照数值的大小排序 -r :以相反的顺序来排序 -k :以某列进行排序 -t :指定分隔符,默认是以空 ...

  8. 如何把整张表格的数据通过form表单的方式传回后台

    开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现 ...

  9. shell判断新字符串列表是否在老字符串列表中

    for sn in `cat 12.30-new`;do if ! [[ `cat 12.30-old` =~ $sn ]];then echo $sn; fi; done

  10. win10中docker使用docker-compose启动报错：pywintypes.error: (2, 'CreateFile', '系统找不到指定的文件。')

    Traceback (most recent call last): File "docker\api\client.py", line 214, in _retrieve_ser ...