下载： 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. Android WifiP2p实现

    Android WifiP2p实现 Wifi Direct功能早在Android 4.0就以经加入Android系统了,但是一直没有很好的被支持,主要原因是比较耗电而且连接并不是很稳定.但是也有很大的 ...

  2. Spring中的InitializingBean与DisposableBean

    InitializingBean顾名思义,应该是初始化Bean相关的接口. 先看一下该接口都定义了哪些方法: public interface InitializingBean { void afte ...

  3. zabbix之被动模式之编译安装proxy

    #:准备源码包,编译安装 root@ubuntu:/usr/local/src# ls zabbix-4.0.12.tar.gz root@ubuntu:/usr/local/src# tar xf ...

  4. 【Python】【Module】json and pickle

    Python中用于序列化的两个模块 json     用于[字符串]和 [python基本数据类型] 间进行转换 pickle   用于[python特有的类型] 和 [python基本数据类型]间进 ...

  5. maven项目install时忽略执行test

    1.在项目所在文件夹根目录使用maven命令打包时: <!-- 不执行单元测试,也不编译测试类 --> mvn install -Dmaven.test.skip=true 或 <! ...

  6. 【MySQL】学生成绩

    统计每个人的总成绩排名 select stu.`name`,sum(stu.score) as totalscore from stu GROUP BY `name` order by totalsc ...

  7. Windows下mongodb的安装和配置

    1----->下载地址:https://www.mongodb.com/dr/fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl ...

  8. ThreadLocal的使用方法

    ThreadLocal的使用方法 (2011-10-10 22:05:48) 转载▼     概述 ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个 ...

  9. Tornadofx学习笔记（4）——IconTextFx开源库,整合5000+个字体图标

    JavaFx中其实也可以直接使用字体图标iconfont的,只需要加载ttf字体文件,之后设置unicode即可,具体可以看我给出的代码 既然JavaFx可以,那么以JavaFx为基础的Tornado ...

  10. LuoguP5139 z小f的函数 题解

    Content 给定 \(T\) 个二次函数 \(y=ax^2+bx+c\),有若干次操作,有一个操作编号 \(p\),保证仅为以下这五种: 操作 \(1\):给定 \(k\),将函数图像向上移动 \ ...