随机彩票
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机彩票</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.selectNum {
width: 750px;
border: 1px solid #d3d3d3;
margin: 50px auto;
}
.selectNum .redTitle {
text-align: center;
width: 423px;
margin-right: 41px;
}
.selectNum .blueTitle {
text-align: center;
width: 228px;
}
.selectNum .blueTitle strong {
color: #1e50a2;
font-size: 14px;
}
.selectNum .redTitle strong {
color: #ba2636;
font-size: 14px;
}
.selectNum .title span {
color: #c4c4c4;
font-size: 12px;
}
.ballarea {
padding-top: 4px;
}
.redBallBox {
width: 430px;
padding-right: 34px;
}
.redBallBox li {
width: 33px;
margin-right: 6px;
float: left;
text-align: center;
height: 50px;
line-height: 14px;
}
.redBallBox li a, .redBallBox li a:visited, .blueBallBox li a, .blueBallBox li a:visited {
background: url(images/balls.png) 0 0 no-repeat;
width: 33px;
height: 33px;
display: block;
text-align: center;
line-height: 34px;
font-size: 16px;
font-weight: 700;
overflow: hidden;
outline: 0;
}
.redBallBox li a:hover{
background-position: -35px 0;
}
.blueBallBox li a:hover{
background-position: -105px 0;
}
.redBallBox li a.on {
background-position: -70px 0;
color: #fff;
}
.blueBallBox li a.on {
background-position: -140px 0;
color: #fff;
}
.blueBallBox {
width: 234px;
}
.blueBallBox li {
width: 33px;
margin-right: 6px;
float: left;
text-align: center;
height: 50px;
line-height: 14px;
}
.random_selection {
text-align: right;
color: #717171;
line-height: 22px;
padding-top: 2px;
padding-right: 10px;
}
.random_selection .radom_redbtn:link, .random_selection .radom_redbtn:visited {
color: #ba2636;
}
.random_selection select {
width: 45px;
line-height: 20px;
}
.random_selection .radom_bluebtn:link, .random_selection .radom_bluebtn:visited {
color: #4260a4;
}
.selectInfo {
height: 20px;
clear: both;
float: none;
text-align: center;
padding-top: 11px;
}
.selectInfo span {
background: #fff;
padding: 0 10px;
display: inline-block;
position: relative;
z-index: 10;
}
.selectInfo strong {
padding: 0 5px;
}
.c_ba2636, a.c_ba2636:link, a.c_ba2636:visited {
color: #ba2636;
}
.c_1e50a2, a.c_1e50a2:link, a.c_1e50a2:visited {
color: #1e50a2;
}
</style>
</head>
<body>
<div class="selectNum clearfix">
<div class="title">
<h2 class="redTitle fl">
<strong>红球区</strong><span>至少选择6个红球</span>
</h2>
<h2 class="blueTitle fl">
<strong>蓝球区</strong><span>至少选择一个蓝球</span>
</h2>
</div>
<div class="ballarea clearfix">
<div class="redBallBox fl">
<ul id="redballUl" class="clearfix">
<li><a href="javascript:;">01</a></li>
<li><a href="javascript:;">02</a></li>
<li><a href="javascript:;">03</a></li>
<li><a href="javascript:;">04</a></li>
<li><a href="javascript:;">05</a></li>
<li><a href="javascript:;">06</a></li>
<li><a href="javascript:;">07</a></li>
<li><a href="javascript:;">08</a></li>
<li><a href="javascript:;">09</a></li>
<li><a href="javascript:;">10</a></li>
<li><a href="javascript:;">11</a></li>
<li><a href="javascript:;">12</a></li>
<li><a href="javascript:;">13</a></li>
<li><a href="javascript:;">14</a></li>
<li><a href="javascript:;">15</a></li>
<li><a href="javascript:;">16</a></li>
<li><a href="javascript:;">17</a></li>
<li><a href="javascript:;">18</a></li>
<li><a href="javascript:;">19</a></li>
<li><a href="javascript:;">20</a></li>
<li><a href="javascript:;">21</a></li>
<li><a href="javascript:;">22</a></li>
<li><a href="javascript:;">23</a></li>
<li><a href="javascript:;">24</a></li>
<li><a href="javascript:;">25</a></li>
<li><a href="javascript:;">26</a></li>
<li><a href="javascript:;">27</a></li>
<li><a href="javascript:;">28</a></li>
<li><a href="javascript:;">29</a></li>
<li><a href="javascript:;">30</a></li>
<li><a href="javascript:;">31</a></li>
<li><a href="javascript:;">32</a></li>
<li><a href="javascript:;">33</a></li>
</ul>
<p class="random_selection">
<select name="">
<option value="6" selected="selected">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<a class="radom_redbtn" href="javascript:;">机选红球</a>
<a class="clearing" href="javascript:;">清空</a>
</p>
</div>
<div class="blueBallBox fl">
<ul id="blueBallUl" class="clearfix">
<li><a href="javascript:;">01</a></li>
<li><a href="javascript:;">02</a></li>
<li><a href="javascript:;">03</a></li>
<li><a href="javascript:;">04</a></li>
<li><a href="javascript:;">05</a></li>
<li><a href="javascript:;">06</a></li>
<li><a href="javascript:;">07</a></li>
<li><a href="javascript:;">08</a></li>
<li><a href="javascript:;">09</a></li>
<li><a href="javascript:;">10</a></li>
<li><a href="javascript:;">11</a></li>
<li><a href="javascript:;">12</a></li>
<li><a href="javascript:;">13</a></li>
<li><a href="javascript:;">14</a></li>
<li><a href="javascript:;">15</a></li>
<li><a href="javascript:;">16</a></li>
</ul>
<p class="random_selection">
<select name="">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
<a class="radom_bluebtn" href="javascript:;">机选蓝球</a>
<a class="clearing" href="javascript:;">清空</a>
</p>
</div>
<p class="selectInfo">
<span>您当前选中了<strong class="c_ba2636">0</strong>个红球，<strong class="c_1e50a2">0</strong>个蓝球，共<strong class="c_ba2636">0</strong>注，共<strong class="c_ba2636">0</strong>元</span><i></i>
</p>
</div>
</div>
<script>
var oRedBallBox = getByClass(document, "redBallBox")[0];
var oBlueBallBox = getByClass(document, "blueBallBox")[0];
var oRedClear = getByClass(oRedBallBox, "clearing")[0];
var oBlueClear = getByClass(oBlueBallBox, "clearing")[0];
var oRedSel = oRedBallBox.getElementsByTagName("select")[0];
var oBlueSel = oBlueBallBox.getElementsByTagName("select")[0];
var oRadomRedbtn = getByClass(document, "radom_redbtn")[0];
var oRadomBluebtn = getByClass(document, "radom_bluebtn")[0];
var oInfo = getByClass(document, "selectInfo")[0];
var aStrong = oInfo.getElementsByTagName("strong");
var oRedballUl = document.getElementById("redballUl");
var oBlueballUl = document.getElementById("blueBallUl");
var aRed = oRedballUl.getElementsByTagName("a");
var aRedLi = oRedballUl.getElementsByTagName("li");
var aBlueLi = oBlueballUl.getElementsByTagName("li");
var aBlue = oBlueballUl.getElementsByTagName("a");
clearFn(oRedClear, aRed);
clearFn(oBlueClear, aBlue);
//清空选择
function clearFn(obtn, aColor){
obtn.onclick = function(){
for(var i=0; i<aColor.length; i++){
aColor[i].className = "";
}
aStrong[2].innerHTML = 0;
aStrong[3].innerHTML = 0;
if(obtn == oRedClear){
aStrong[0].innerHTML = 0;
}
else {
aStrong[1].innerHTML = 0;
}
}
}
countSelLi(aRedLi);
countSelLi(aBlueLi);
//统计点击球数
function countSelLi(aLi){
for(var i=0; i<aLi.length; i++){
(function (i){
aLi[i].onclick = function(){
totalSum();
}
})(i);
}
}
//选择红球下拉菜单
oRedSel.onchange = function(){
oRadomRedbtn.click();
}
//选择蓝球下拉菜单
oBlueSel.onchange = function(){
oRadomBluebtn.click();
}
aSelect(aRed);
aSelect(aBlue);
function aSelect(Aa){
for(var i=0; i<Aa.length; i++){
(function (i){
Aa[i].onclick = function(){
if(this.className){
this.className = "";
}
else{
this.className = "on";
}
}
})(i);
}
}
var timer = null;
randomSel(oRadomRedbtn, aRed, oRedSel);
randomSel(oRadomBluebtn, aBlue, oBlueSel);
//随机选择
function randomSel(bBtn, aColorAa, oSel){
bBtn.onclick = function(){
for(var i=0; i<aColorAa.length; i++){
aColorAa[i].className = "";
}
var num = (aColorAa == aRed) ? 6 : 1;
var all = (aColorAa == aRed) ? 33 : 16;
var arr = randomNum(all, oSel.selectedIndex + num);
var iNow = -1;
clearInterval(timer);
timer = setInterval(function (){
iNow++;
if(iNow<arr.length){
aColorAa[arr[iNow] - 1].className = "on";
}
else{
clearInterval(timer);
timer = null;
totalSum();
}
}, 60);
};
}
//统计金额
function totalSum(){
var aRedNum = countSelNum(aRed);
var aBlueNum = countSelNum(aBlue);
aStrong[0].innerHTML = aRedNum;
aStrong[1].innerHTML = aBlueNum;
if( aRedNum >= 6 && aBlueNum >=1 ){
var rMoney = factorial(aRedNum) / ( factorial(6) * factorial(aRedNum - 6) );
var bMoney = aBlueNum;
aStrong[2].innerHTML = rMoney * bMoney;
aStrong[3].innerHTML = 2 * rMoney * bMoney;
}
}
//为了统计金额而求阶层
function factorial(i){
var result = 1;
while(i>1){
result = result * i;
i--;
}
return result;
}
//统计球选择数量
function countSelNum(Aa){
var count = 0;
for(var i=0; i<Aa.length; i++){
if(Aa[i].className.indexOf("on") != -1){
count++;
}
}
return count;
}
//生成随机数
function randomNum(allNum, iNum){
var result = [];
var arr = [];
for(var i=1; i<=allNum; i++){
arr.push(i);
}
for(var j=0; j<iNum; j++){
result.push( arr.splice(Math.floor(Math.random()*arr.length), 1) );
}
sortNum(result);
return result;
}
//数字排序
function sortNum(arr){
arr.sort(function (a, b){
return a - b;
});
}
//封装获取class名字的函数
function getByClass(oParent, sClass){
var elems = oParent.getElementsByTagName('*');
var result = [];
var re = new RegExp('\\b' + sClass + '\\b');
for(var i=0; i<elems.length; i++){
if( re.test(elems[i].className) ){
result.push( elems[i] );
}
}
return result;
}
</script>
</body>
</html>
效果图：
