实例
<!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>
<link
rel="stylesheet"
href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css"
/>
<link
rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<style>
table {
/* text-align: center; */
/* width: 10%; */
/* border-collapse: collapse; */
/* margin: auto; */
/* margin-top: 50px; */
}
table tbody td {
/* border-bottom: 1px solid; */
}
fieldset {
width: 50%;
margin: auto;
text-align: center;
position: relative;
top: 50px;
}
.giftbtn {
margin-top: 10px;
text-align: center;
}
.mianban {
/* margin: auto; */
/* width: 500px; */
margin-top: 50px;
}
.giftbtn button:first-child {
margin-right: 50px;
}
.giftbtn button {
width: 20%;
}
#inputGift {
text-align: center;
font-size: 1.3em;
}
/* tbody tr td:nth-of-type(2):not(.del) {
background-color: lightcoral;
} */
</style>
</head>
<body>
<div class="layui-fluid layui-col-md4" style="float: none">
<div
class="col-xs-12 col-sm-10 col-md-8 col-lg-10 center-block mianban"
style="float: none"
>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center">
<i class="fa fa-cog" aria-hidden="true"></i>
信息录入
</h3>
</div>
<div class="panel-body">
<!-- 面板内容star -->
<div class="input-group" style="margin-bottom: 15px">
<div class="input-group-addon">武侠称号</div>
<input
type="text"
class="form-control wxname"
placeholder="请先设定名称"
/>
</div>
<div class="input-group" style="margin-bottom: 15px">
<div class="input-group-addon">抽取间隔</div>
<input type="text" class="form-control jiange" value="50" />
</div>
<!-- 面板内容end -->
</div>
</div>
</div>
<div
class="col-xs-12 col-sm-10 col-md-8 col-lg-10 center-block"
style="float: none"
>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center">抽取武功</h3>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="inputGift" />
<div class="giftbtn">
<button class="btn btn-primary">开始</button>
<button
class="btn btn-primary"
style="background-color: rgb(153, 95, 51)"
>
停止
</button>
</div>
</div>
</div>
</div>
<div
class="col-xs-12 col-sm-10 col-md-8 col-lg-10 center-block"
style="float: none"
>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center">
<i class="fa fa-bars" aria-hidden="true"></i>
抽取记录
</h3>
</div>
<div class="panel-body">
<!-- 面板内容star -->
<div class="giftlog">
<!-- -->
</div>
<!-- 面板内容end -->
</div>
</div>
</div>
<div
class="col-xs-12 col-sm-10 col-md-8 col-lg-10 center-block"
style="float: none"
>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center">
功夫列表
</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>功夫名称</th>
<th>演示</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>抓小偷</td>
<td><a href="" class="fa fa-search">查看</a></td>
</tr>
<tr>
<td>2</td>
<td>懒加载</td>
<td><a href="" class="fa fa-search">查看</a></td>
</tr>
<tr>
<td>3</td>
<td>导航栏</td>
<td><a href="" class="fa fa-search">查看</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
const starbtn = document.querySelector(".giftbtn button:first-child");
const stopbtn = document.querySelector(".giftbtn button:last-child");
var inputGift = document.querySelector("#inputGift");
var timer = null;
var currentgift;
starbtn.addEventListener("click", showgift);
stopbtn.addEventListener("click", stopgift);
function showgift() {
if (document.querySelector(".wxname").value === "") {
layer.alert("请先填写武侠名称");
} else {
starbtn.disabled = "disabled";
starbtn.innerHTML = "抽取中...";
var jiange = document.querySelector(".jiange").value;
timer = setInterval(randomgift, jiange);
}
}
function stopgift() {
starbtn.disabled = "";
starbtn.innerHTML = "开始";
clearInterval(timer);
// console.log(inputGift.value);
if (inputGift.value === "") {
layer.alert("还未开始抽取", { title: "温馨提示" });
} else {
layer.alert(
"您抽得武功：" + inputGift.value,
{ icon: 6, title: "温馨提示" },
function (index) {
inputGift.value = "";
layer.close(index);
}
);
// currentgift.style.backgroundColor = "l";
currentgift.style.textDecoration = "line-through"; //加删除线
//抽过的加个class名 下次not()此类名
currentgift.className = currentgift.className + "del";
giftlog(inputGift.value);
}
}
function randomgift() {
//排除类名del的, 因为del的代表已抽过
var gifts = document.querySelectorAll(
"tbody tr td:nth-of-type(2):not(.del)"
);
//先判断取出的td是否为0
if (gifts.length === 0) {
clearInterval(timer);
starbtn.disabled = "";
starbtn.innerHTML = "开始";
inputGift.value = "";
layer.alert("功夫已全部练完！", { icon: 1 });
} else if (gifts.length === 1) {
//如果是最后一项 就直接出结果
clearInterval(timer);
starbtn.disabled = "";
starbtn.innerHTML = "开始";
inputGift.value = "";
layer.alert(
"只剩最后一项:<b> " + gifts[0].innerHTML + "</b><br>直接归你吧！",
{ icon: 6 }
);
gifts[0].style.textDecoration = "line-through";
gifts[0].className = gifts[0].className + "del";
giftlog(gifts[0].innerHTML);
} else {
//正常随机抽取
var randomName = getRandomInt(0, gifts.length);
currentgift = gifts[randomName];
inputGift.value = gifts[randomName].innerHTML;
}
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
function giftlog(gift) {
var span = document.createElement("span");
var br = document.createElement("br");
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var time = h + ":" + m + ":" + s;
var wxname = document.querySelector(".wxname").value;
console.log(wxname);
var content = document.createTextNode(
time + " " + wxname + "抽到：" + gift
);
span.appendChild(content);
span.appendChild(br);
document.querySelector(".giftlog").appendChild(span);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例