<!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>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html随机抽奖</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.content {
width:456px;
margin:0 auto;
text-align:center;
font-weight:800;
}
.kuai {
width:150px;
height:150px;
float:left;
line-height:150px;
border:1px solid #666;
}
.button {
width:456px;
margin:0 auto;
text-align:center;
}
.choujiang {
border:none;
color:#fff;
background-color:#5cb85c;
border-radius:4px;
font-size:20px;
color:#fff;
padding:5px 20px;
margin-top:20px;
cursor:pointer;
}
.choujiang:hover {
background-color:red;
}
</style>
</head>
<body>
<div class="content">
</div>
<div class="button">
<button type="button" class="choujiang">抽奖</button>
</div>
<script>
//请在此段代码前引用jq,否则代码无效
$(document).ready(function() {
var name = ['飞机', '大炮', '火箭', '游艇', '电脑', '键盘', '鼠标', '谢谢参与', '三年模拟两年高考']
for (var i = 1; i <= name.length; i++) {
$(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>');
}
$('.choujiang').on('click', function() {
$(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态
var sum = name.length;
var le = 3 //设置滚动多轮
var hh = sum * le;
var y = 1;
var x = hh;
var times = 12; //调节滚动速度
var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数
var i = Math.ceil(rand / sum); //向上取整
for (var i = i; i < le; i++) {
rand = rand + sum
}
time(1, rand, times, sum, times) //点击按钮后触发time事件
})
});
function time(shu, sums, tie, sum, tis) { //倒计时
var tie = tie + tis //滚动速度
setTimeout(function() {
if (shu <= sums) {
$('.kuai').css({
'background-color': '',
'color': ''
}) //清除css
$('#' + shu + '').css({
'background-color': 'aqua',
'color': '#fff'
}) //添加css样式
if (shu == sum) {
sums = sums - shu
shu = 0;
}
shu++
text(shu, sums, tie, sum, tis)
} else {
$('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态
}
}, tie);
}
function text(shu, sums, tie, sum, tis) {
time(shu, sums, tie, sum, tis) //执行time事件
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点菜名</title>
<style>
/* 初始化页面,清除所有元素的内外边距 */
* {
padding: 0;
margin: 0;
/* 设置背景颜色为414141 */
background-color: #414141;
}
/* 盒子居中 */
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* 使用上期视频的文字渐变效果,再加一点点文字阴影 */
span, h2 {
text-shadow: 0 0 10px #dfd8d8;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: ff 0.9s linear infinite;
}
@keyframes ff {
to {
filter: hue-rotate(360deg);
}
}
/* 设置一下字体大小 */
h2 {
font-size: 72px;
}
span {
font-size: 46px;
}
/* 按钮居中 */
button {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 25px;
box-shadow: 0 0 10px #fff;
/* 取消轮廓线 */
outline: none;
background-color: gray;
}
</style>
</head>
<body>
<div>
<h2>随机点菜名</h2>
<span id="name"></span>
</div>
<p/><button id="button_text">stop</button>
<script>
// 获取标签
let nametxt = document.getElementById('name');
let button = document.getElementById('button_text');
// 创建一个数组存储名字
let uname = ['阿阳热爱前端', '郝嘉慧', '冬灰条', '蒸羊羔儿', '蒸熊掌', '蒸鹿尾儿',
'烧花鸭', '烧雏鸡', '烧子鹅', '炉猪', '炉鸭', '酱鸡', '腊肉', '松花',
'小肚儿', '晾肉', '香肠儿', '什锦苏盘儿', '熏鸡白肚儿', '清蒸八宝猪',
'江米酿鸭子', '罐儿野鸡', '罐儿鹌鹑', '卤什件儿', '卤子鹅', '山鸡', '兔脯',
'菜蟒', '银鱼', '清蒸哈什蚂', '烩鸭腰儿', '鸭条', '清拌腰丝儿', '黄心管儿'];
// 创建一个函数生成随机数字
function getrandom(min, max) {
return Math.floor(Math.random() * (max - min - 1) + min);
}
function clock() {
// 通过获取一个随机的数组下标实现随机获取一个名字,并将这个名字赋值给变量random
let random = uname[getrandom(0, uname.length - 1)];
//将random塞到span里
nametxt.innerHTML = random;
};
// 打印名字已经实现了,下一步让没点击按钮前名字一直刷新
// 设置不停止时名字的刷新速度为30毫秒
let time = self.setInterval("clock()", 30);
// 将开始与停止按钮绑定到按钮上,并通过按钮控制
let flag = false;
button.onclick = function () {
// 当flag标志为false时,点击按钮让刷新停止;
if (flag == false) {
time = window.clearInterval(time);
// 按钮文字从stop变为start;
button.innerHTML = 'start';
// 标志变更
flag = true;
} else {
// 当flag标志为true时,开始刷新,文字变更
time = self.setInterval("clock()", 30);
button.innerHTML = 'stop';
flag = false;
}
}
</script>
</body>
</html>