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简单随机抽奖页面（在线抽奖、随机选取、自动挑选）的更多相关文章
- socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...
- 抽奖随机算法的技术探讨与C#实现
一.模拟客户需求 1.1 客户A需求:要求每次都按照下图的概率随机,数量不限,每个用户只能抽一次,抽奖结果的分布与抽奖概率近似. 1.2 客户B需求:固定奖项10个,抽奖次数不限,每个用户只能抽一次, ...
- 面试中常问的有关随机选取k个数的总结
1.在半径为1的圆中随机选取一点. 2.给定一个未知长度的整数流,如何随机选取一个数 3.给定一个数据流,其中包含无穷尽的搜索关键字(比如,人们在谷歌搜索时不断输入的关键字).如何才能从这个无穷尽的流 ...
- H5页面设计器，仿有赞商城页面在线设计器，比富文本框更友好的内容编辑器
基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...
- [置顶] ios 在一定选项范围随机选取选项demo
原创文章,转载请注明出处:http://blog.csdn.net/donny_zhang/article/details/9408285 demo功能:ios 在一定范围随机选取demo,如截屏.在 ...
- 从MySQL随机选取数据
--从MySQL随机选取数据 -------------------------2014/06/23 从MySQL随机选取数据最简单的办法就是使用”ORDER BY RAND()”; 方案一: SEL ...
- 接口测试入门（4）--接口自动化测试框架 / list和map用法 / 随机选取新闻 （随机数生成） / 接口相关id映射
一.接口自动化测试框架 为了更好的组织测试方法,测试用例并且持续集成,我们选择了 java+testNG(测试用例组织)+gitlab(代码版本管理)+Jenkins(持续集成工具) 作为一整套的自 ...
- Py之Crawler：爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹——Jason niu
#Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹 import urllib.request import os import random def ...
- 从n个数中随机选取m个
咋一看,这是个很简单的问题,但是如果n是个不确定的数呢?比如服务器每天会收到数以亿计的请求,但是目前服务器端不希望保存所有的请求,只想随机保存这些请求中的m个.试设计一种算法,能够使服务器实时保存m个 ...
随机推荐
- [php安全]原生类的利用
php原生类的利用 查看原生类中具有魔法函数的类 $classes = get_declared_classes(); foreach ($classes as $class) { $methods ...
- 【1】Embarrassingly Parallel（易并行计算问题）
1.什么是Embarrassingly Parallel(易并行计算问题) 易并行计算问题:A computation that can be divided into a number of co ...
- Git命令行演练-团队开发
** 团队开发必须有一个共享库,这样成员之间才可以进行协作开发** ### 0. 共享库分类 > 本地共享库(只能在本地面对面操作) - 电脑文件夹/U盘/移动硬盘 & ...
- weak和拷贝
weak/拷贝 1. weak 只要没有strong指针指向对象,该对象就会被销毁 2. 拷贝 NSString和block用copy copy语法的作用 产生一个副本 修改了副本(源对象)并不会影响 ...
- django搭建示例-ubantu环境
python3安装--------------------------------------------------------------------------- 最新的django依赖pyth ...
- spring的注解AOP配置
package com.hope.service.impl;import com.hope.service.IAccountService;import org.aspectj.lang.annota ...
- ActiveMQ（二）——ActiveMQ的安装和基本使用
一:安装 2.启动之后成功 二.创建实例测试ActiveMQ 配置Maven所需的依赖 <dependency> <groupId>org.apache.activemq< ...
- VectorCAST软件自动化测试方案
VectorCAST 是主要用于对C/C++/Ada程序进行软件自动化测试,并能够在Windows和Linux等多种开发环境下运行.其主要功能包含自动化的单元测试.集 成测试.覆盖率分析.回归测试.代 ...
- Webpack学习篇
<深入浅出Webpack>优化篇 01 Webpack 优化可以分为开发优化和输出质量优化两部分,主要要点如下: 优化开发体验,提升开发效率 优化构建速度 优化使用体验 优化输出质量 减少 ...
- SQL Server 2014如何DATEDIFF()函数截取对应时间年月日
4.1 定义和用法: DATEDIFF()函数返回两个日期之间的时间 4.2 语法 DATEDIFF(datepart,startdate,enddate) datepart值: year | qua ...