下载： 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. Linux基础命令---mirror获取ftp目录

    mirror 使用lftp登录ftp服务器之后,可以使用mirror指令从服务器获取目录   1.语法       mirror [OPTS] [source [target]]   2.选项列表 选 ...

  2. pandas基础学习一

    生成对象 用值列表生成 Series 时,Pandas 默认自动生成整数索引: In [3]: s = pd.Series([1, 3, 5, np.nan, 6, 8]) In [4]: s Out ...

  3. 『学了就忘』Linux启动引导与修复 — 71、grub启动引导程序的加密

    目录 1.什么是grub加密 2.grub加密步骤 3.grub加密的lock属性 1.什么是grub加密 上篇文章说了,系统在开机的时候,有一个5秒的读秒时间,方便你进入到grub界面中. 如下图所 ...

  4. 第44篇-为native方法设置解释执行入口

    对于Java中的native方法来说,实际上调用的是C/C++实现的本地函数,由于可能会在Java解释执行过程中调用native方法,或在本地函数的实现过程中调用Java方法,所以当两者相互调用时,必 ...

  5. HBuilderX无法启动微信小程序？仅三步

    1.复制微信开发者工具启动路径 : "C:\Program Files (x86)\Tencent\微信web开发者工具\微信web开发者工具.exe" 不要后面的 "微 ...

  6. [BUUCTF]PWN——[V&N2020 公开赛]simpleHeap

    [V&N2020 公开赛]simpleHeap 附件 步骤: 例行检查,64位,保护全开 根据题目可知是一道堆,直接用64位ida打开 我修改了这些函数的名称,这样方便看程序 add,我们可以 ...

  7. 【WP】攻防世界-杂项-Misc

    长期更新一波 攻防世界 的杂项题解 这东西主要靠积累吧 攻防世界:https://adworld.xctf.org.cn 因为攻防世界的题目顺序经常变化,我也不改序号了,顺着之前写的位置往下写,推荐使 ...

  8. [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路

    [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路 目录 [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路 0x00 摘要 0x01 痛点 0x02 难点 0 ...

  9. CF355B Vasya and Public Transport 题解

    Content 小 \(A\) 要乘坐交通工具,其中公交车的辆数是 \(n\),第 \(i\) 辆公交车的编号为 \(i\),乘坐次数为 \(a_i\):手推车的辆数是 \(m\),每辆手推车的编号为 ...

  10. logging模块学习

    logging模块: https://docs.python.org/3/howto/logging.html#logging-basic-tutorial 本记录教程 日志记录是一种跟踪某些软件运行 ...