html简单随机抽奖页面(在线抽奖、随机选取、自动挑选)
2024-08-28 02:06:18
下载:
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>
最新文章
- java读写Properties属性文件公用方法
- sql in按照指定顺序排序
- 4-python学习——数据操作
- 【原创】jmeter3.0在beanshell中输入中文乱码以及字体大小的更改
- 设置button不同状态下的背景色,即把这个颜色变成图片设置成,背景图片
- MySQL重置root密码的几种方法(windows+Linux)
- C#实训 打字游戏
- 通过intent启动Activity
- 团队作业9--测试与发布(Beta版)
- iOS-状态栏字体颜色【白色】【Xcode9.1】
- 浅析Python3中的bytes和str类型
- spring cloud 入门系列二:使用Eureka 进行服务治理
- Django 实现简单的文件上传
- JavaScript,只有你想不到
- aptana怎么显示空格 tab和回车等
- JS字典 Dictionary类
- Capjoint
- 为啥RESTFULL如此重要?
- Fiddler——PC上实现手机的抓包(转载 http://www.jianshu.com/p/13f8a81d7c7c)
- Chapter One:数据结构和算法-解压序列赋值给多个变量