随机选择双色球彩票
彩票中不中无所谓,开心最重要了,反正我是没中过大于十块钱的彩票,哈哈哈哈
<!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>Document</title>
<style>
.main .balls {
width: 450px;
padding: 30px 10px 10px;
margin-bottom: 20px;
position: relative;
border-radius: 4px;
}
.main .balls:after {
content: '\20';
clear: both;
display: block;
height: 0;
overflow: hidden;
}
.main .balls span {
position: absolute;
left: 12px;
top: 5px;
font-size: 13px;
}
.main b {
float: left;
width: 30px;
height: 30px;
font-size: 15px;
background: #FFF;
border: 1px solid;
border-radius: 50%;
line-height: 30px;
text-align: center;
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.main .red .active {
background: #f56c6c;
color: #FFF;
}
.main .blue .active {
background: #3a8ee6;
color: #FFF;
}
.main .red {
background: #feeff0;
}
.main .red b {
border-color: #f56c6c;
}
.main .blue {
background: #ecf8ff;
}
.main .blue b {
border-color: #3a8ee6;
}
button {
width: 80px;
height: 35px;
line-height: 35px;
border-radius: 4px;
color: rgb(255, 255, 255);
border: none;
background-color: rgb(68, 113, 244);
outline: none;
cursor: pointer;
}
button:last-child {
background-color: transparent;
color: #000;
border: 1px solid gray;
}
.chooseResult,
.chooseNumBox {
margin-top: 20px;
}
.chooseNum {
margin: 0 10px;
display: inline-block;
width: 30px;
height: 30px;
font-size: 15px;
border: 1px solid;
border-radius: 50%;
line-height: 30px;
text-align: center;
color: #fff;
background-color: #f56c6c;
}
.chooseNum:last-child {
background-color: #3a8ee6;
}
</style>
</head>
<body>
<div class="main">
<h3 style="color: lightseagreen;">中它一个亿,然后环游世界!!!</h3>
<div class="balls red">
<span>红球</span>
<div class="balls-wp">
<b>01</b>
<b>02</b>
<b>03</b>
<b>04</b>
<b>05</b>
<b>06</b>
<b>07</b>
<b>08</b>
<b>09</b>
<b>10</b>
<b>11</b>
<b>12</b>
<b>13</b>
<b>14</b>
<b>15</b>
<b>16</b>
<b>17</b>
<b>18</b>
<b>19</b>
<b>20</b>
<b>21</b>
<b>22</b>
<b>23</b>
<b>24</b>
<b>25</b>
<b>26</b>
<b>27</b>
<b>28</b>
<b>29</b>
<b>30</b>
<b>31</b>
<b>32</b>
<b>33</b>
</div>
</div>
<div class="balls blue">
<span>蓝球</span>
<div class="balls-wp">
<b>01</b>
<b>02</b>
<b>03</b>
<b>04</b>
<b>05</b>
<b>06</b>
<b>07</b>
<b>08</b>
<b>09</b>
<b>10</b>
<b>11</b>
<b>12</b>
<b>13</b>
<b>14</b>
<b>15</b>
<b>16</b>
</div>
</div>
<div>
<button onclick="reflash()">刷新</button>
<button onclick="reset()">重置</button>
</div>
<div class="chooseResult">您随机选择的双色球彩票号码是:<div class="chooseNumBox"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function randomFn() {
return selectBall('red', 6) + '|' + selectBall('blue', 1);
}
function selectBall(color, n) {
var wrap = document.querySelector('.' + color + ' .balls-wp');
var balls = wrap.getElementsByTagName('b');
// 重置高亮
for (var i = 0; i < n; i++) {
balls[i].classList.remove('active');
}
// 随机生成
var choosed = [];
for (var i = 0; i < n; i++) {
var index = Math.floor(Math.random() * balls.length);
choosed.push(balls[index]);
balls[index].classList.add('active');
balls[index].remove();
}
choosed.sort(function (a, b) {
return a.textContent - b.textContent;
});
for (var i = n - 1; i >= 0; --i) {
wrap.insertBefore(choosed[i], balls[0]);
}
// 返回拼接文字
var chooseNum = []
choosed.forEach(item => {
$(".chooseNumBox").append('<span class="chooseNum">' + item.textContent + '</span>')
})
return choosed.map(function (val) {
return val.textContent;
}).join(',');
}
randomFn()
// 刷新
function reflash() {
$('.chooseNumBox').html("");
randomFn()
}
// 重置排序
function reset() {
location.reload();
}
</script>
</body>
</html>
效果图: