原生JS实现网络彩票投注效果

JavaScript 2019-01-06

个人游戏之作，小伙伴们研究下就好

主要功能：

1、可自由选择投注模式、倍数，可点击‘×'删除提交注单。 2、可使用jsonp引用官方彩票开奖数据（实时开奖）。 3、结合后台可实现官彩同样的效果。

实现原理：

单纯使用Js实现，这里主要用数组存放数据，随机生成开奖号码，然后进行判断是否中奖。

下面是完整JS代码：

index.html

rush:xhtml;"> <Meta charset="UTF-8"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> 彩票--德芙
TanZhouCaiPiao

付出不亚于任何人的努力！

潭州彩票期

德芙纵享丝滑
￥ 1314.51
三星 定位胆 大小单双
倍

奖金：1800

0注，共 ￥ 0元

玩法 注数 倍数 金额

介绍说明

投注方式：请您选择您的投注号码后‘添加号码'==>‘提交注单'==>‘立即投注'

三星玩法：至少需要在‘百位'、‘十位'、‘个位'三个位置中选择一个号码投注，开奖号码后三位与您投注号码一致即中奖

定位胆玩法：从任意一个位置选择一个号码即可投注，开奖号码与投注号码的位置、号码相同即中奖

大小单双玩法：至少需要在‘百位'、‘十位'中选择一个号码投注，开奖号码与投注号码的位置、形态相同即中奖

功能：可自由选择投注模式、倍数，可点击‘×'删除提交注单

扩展：可使用jsonp引用官方彩票开奖数据（实时开奖），更多玩法添加请联系我

Author:Thompson德芙

转载：

index.css

}

Game .G_top .G_t_kaijiang .G_t_k_num span{

display:block;
width:59px;
height:57px;
margin-left:11px;
margin-top:16px;
float:left;
background:url('../img/num.png') -423px -119px;
}

Game .G_top .G_t_kaijiang .G_t_k_num span.kaijiang{

background:url('../img/mv.gif');
background-position: '0px 0px';
}

Game .G_top .G_t_user{

width:240px;
height:40px;
position:absolute;
bottom:-20px;
left:350px;
}

Game .G_top .G_t_user .supMoney,#Game .G_top .G_t_user .addMoney{

width:140px;
height:40px;
position:absolute;
top:0px;
right:-80px;
font-weight:bold;
font-size:24px;
color:#ff6700;
opacity:1;
}

Game .G_top .G_t_user .addMoney{

color:#00ff66;
}

Game .G_top .G_t_user > div{

width:100px;
line-height:40px;
text-align:center;
float:left;
color:#fff;
}

Game .G_top .G_t_user .G_t_u_buy{

color:#ff0;
}

Game .G_top .G_t_user .G_t_u_buy .G_t_u_money{

color:#ff6700;
}

content{

width:100%;
height:350px;
margin-top:30px;
}

content .c_left{

width:680px;
height:100%;
float:left;
position:relative;
}

content .c_left .c_l_mode{

width:672px;
height:38px;
padding:3px;
background:rgba(0,0.8);
border-radius:5px;
}

content .c_left .c_l_mode > span{

width:70px;
height:34px;
display:block;
float:left;
font-family:14px;
text-align:center;
line-height:34px;
margin:2px 10px 2px 0px;
background:rgb(78,70,63);
border-radius:5px;
color:#fff;
cursor:pointer;
transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
}

content .c_left span.c_l_m_first{

background:rgba(31,58,110,1);
}

content .c_left .c_l_mode > span:hover{

background:rgba(31,1);
}

content .c_left .c_l_shuoming{

margin-top:10px;
width:100%;
height:44px;
background:rgba(0,0.8);
border-radius:5px;
}

content .c_left .c_l_shuoming .c_l_s_right{

width:260px;
height:20px;
float:right;
margin:11px 10px 11px 0px;
}

content .c_left .c_l_shuoming .c_l_s_right > a{

display:block;
width:78px;
height:20px;
float:left;
line-height:20px;
font-size:12px;
color:#fff;
text-align:center;
margin-right:7px;
background:url('../img/icon.png') no-repeat;
position:relative;
}

content .c_left .c_l_shuoming .c_l_s_right > a .c_l_s_r_hide{

width:200px;
padding:5px;
color:#e8e9e9;
background:rgba(41,0.8);
position:absolute;
right:0px;
top: 30px;
border-radius:5px;
display:none;;
}

content .c_left .c_l_number{

width:660px;
height:160px;
margin-top:20px;
padding:0 10px;
}

content .c_left .c_l_number ul{

width:660px;
height:50px;
}

content .c_left .c_l_number ul:after{

visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}

content .c_left .c_l_number .c_l_n_align{

color:#ffbe13;
width:60px;
height:50px;
float:left;
line-height:50px;
}

content .c_left .c_l_number ul li{

float:left;
width:43px;
height:43px;
border-radius:50%;
line-height:43px;
color:#fff;
text-align:center;
cursor:pointer;
margin:3px 5px 4px 0px;
background:url('../img/icon.png') no-repeat -46px -57px;
}

content .c_left .c_l_number .c_l_n_btn{

margin-top:5px;
width:100px;
height:40px;
float:right;
}

content .c_left .c_l_number .c_l_n_btn > span{

display:block;
width:30px;
height:20px;
float:left;
color:#fff;
font-size:12px;
line-height:20px;
text-align:center;
background:#4a433c;
border-radius:3px;
margin:1px;
cursor:pointer;
transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
}

content .c_left .c_l_number .c_l_n_btn > span:hover{

background:rgb(50,164);
}

content .c_left .c_l_bottom{

width:100%;
height:34px;
margin-top:20px;
position:relative;
}

content .c_left .c_l_bottom .c_l_b_function{

width:540px;
height:34px;
padding-left:10px;
background:rgba(0,0.8);
float:left;
border-radius:5px;
line-height:34px;
color:#fff;
font-size:12px;
}

content .c_left .c_l_bottom .c_l_b_function i{

float:left;
margin:0 5px;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_sup{

display:block;
width:16px;
height:16px;
margin-top:9px;
background:url('../img/sub.png') no-repeat;
float:left;
cursor:pointer;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_beishu{

width:60px;
height:24px;
background:#333;
border:none;
border-radius:5px;
float:left;
margin:5px;
text-align:center;
color:#ff6700;
outline:none;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_add{

display:block;
width:16px;
height:16px;
margin-top:9px;
background:url('../img/add.png') no-repeat;
float:left;
cursor:pointer;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_sel{

width:50px;
height:24px;
background:#333;
border:none;
border-radius:5px;
float:left;
margin:5px 20px;
text-align:center;
color:#ff6700;
cursor:pointer;
outline:none;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_jiangjin{

width:70px;
height:100%;
display:inline-block;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_jiangjin span{

color:#ff6700;

}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_data{

width:200px;
float:right;
}

content .c_left .c_l_bottom .c_l_b_function .c_l_b_f_data .c_l_b_f_d_num{

margin:0 5px;
color:#ff6700;
}

content .c_left .c_l_bottom .c_l_b_function:after{

visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}

content .c_left .c_l_bottom .c_l_b_submit{

width:94px;
height:28px;
padding:3px;
float:right;
background:rgba(0,0.8);
border-radius:5px;
margin-right:10px;
}

content .c_left .c_l_bottom .c_l_b_submit > input{

width:94px;
height:28px;
border-radius:3px;
font-size:16px;
font-family:'Microsoft yahei';
background:rgba(50,0.8);
border:none;
color:#fff;
cursor:pointer;
}

content .c_left .c_l_bottom .c_l_b_submit > input:hover{

background:rgba(50,1);
}

content .c_left .c_l_bottom .c_l_b_delednum{

position:absolute;
bottom:-33px;
left:0px;
width:94px;
height:28px;
border-radius:3px;
font-size:16px;
font-family:'Microsoft yahei';
background:rgba(50,0.8);
border:none;
color:#fff;
cursor:pointer;
outline:none;
}

content .c_left .c_l_bottom .c_l_b_delednum:hover{

background:rgba(50,1);
}

content .c_left .c_l_data{

min-width:660px;
max-width:660px;
min-height:115px;
position:absolute;
top:370px;
left:0;
border-radius:5px;
background:rgba(0,0.8);
border:none;
color:#fff;
padding:5px 10px;
font-size:14px;
font-family:'merriweather,arial,sans-serif';
letter-spacing:2px;
}
/right/

content .c_right{

width:300px;
height:100%;
float:right;
}

content .c_right > div{

border-radius:5px;
background:rgba(0,0.8);
}

content .c_right .c_r_rus{

width:100%;
height:185px;
position:relative;
}

content .c_right .c_r_rus > div{

position:absolute;
color:#ff6700;
height:30px;
line-height:30px;
text-align:center;
width:150px;
}

content .c_right .c_r_rus .c_r_r_qihao{

left:0;top:0;
}

content .c_right .c_r_rus .c_r_r_haoma{

right:0;top:0;
}

content .c_right .c_r_rus ul{

width:100%;
position:absolute;
top:30px;left:0;
color:#fff;
}

content .c_right .c_r_rus ul li{

height:30px;
width:100%;
}

content .c_right .c_r_rus ul li span{

display:inline-block;
width:150px;
height:30px;
line-height:30px;
float:left;
text-align:center;
}

content .c_right .c_r_list{

width:280px;
height:150px;
padding:10px;
text-align:left;
margin:20px auto;
color:#fff;
font-size:14px;
}

content .c_right .c_r_list .c_r_l_title{

width:100%;
height:30px;
}

content .c_right .c_r_list .c_r_l_title span{

display:inline-block;
width:60px;
text-align:center;
line-height:20px;
color:#ff6700;
}

content .c_right .c_r_list ul li{

width:100%;
height:20px;
}

content .c_right .c_r_list ul li span{

display:inline-block;
width:60px;
text-align:center;
line-height:20px;
margin-right:4px;
}

content .c_right .c_r_list ul li span.list_close{

width:20px;
height:20px;
text-align:right;
cursor:pointer;
color:#ff6700;
}

content .c_right .c_r_l_title span.close{

width:20px;height:20px;
background-image: url('../img/icon.png');
background-repeat: no-repeat;
background-position: -67px -21px;
cursor:pointer;
}

content .c_right .c_r_touzhu{

margin-top:15px;
padding:5px;
color:#fff;
text-align:center;
}
/*

content .c_right .c_r_touzhu span{

color:#ff6700;
}

content .c_right .c_r_touzhu .c_r_t_issue{

}

content .c_right .c_r_touzhu .c_r_t_queren{

font-size:14px;
margin:15px 0;
}*/

content .c_right .c_r_touzhu .c_r_t_btn{

width:100%;
height:50px;
background:rgba(50,0.8);
border:none;
border-radius:5px;
color:#fff;
font-size:26px;
font-family:'Microsoft yahei';
font-weight:bold;
cursor:pointer;
outline:none;
transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
}

content .c_right .c_r_touzhu .c_r_t_btn:hover{

background:rgba(50,1);
}

index.js

rush:js;"> window.onload=function(){ var toggleMove=document.getElementById('toggleMove'); var toggleOff=true; Game.init(); move(toggleMove.parentNode,{'top':'0px'},'10'); toggleMove.onclick=function(){ if(toggleOff){ move(toggleMove.parentNode,{'top':'-242px'},'10'); this.className='close'; toggleOff = !toggleOff; }else{ move(toggleMove.parentNode,'10'); this.className='arrow'; toggleOff = !toggleOff; } } } var Game={ 'numPos':['-63px -61px','-3px -3px','-63px -3px','-123px -3px','-183px -3px','-243px -3px','-303px -3px','-363px -3px','-423px -3px','-3px -61px'],'oNum':document.getElementById('c_l_number'),'personMon':document.getElementById('G_t_u_money'),'alignArr':['百位','十位','个位'],'btnArr':['全','大','小','奇','偶','清'],'qishu':0,'step':'0','Data':[],'targetData':[],'OrderArr':[],'num':'1','amountX':0,'wanfa':null,'init':function(){ var oMode=document.getElementById('c_l_mode').getElementsByTagName('span'); var jiangjin=document.getElementById('jiangjin'); this.addInitCase1(); this.addRegulation('0'); this.control(); this.controlInput(Game.amountX); this.controlSelect(Game.num); this.getNumData(Game.step); this.empty(); for (var i=0;i < oMode.length;i++) { oMode[i].index=i; oMode[i].onclick=function(){ Game.step=this.index; for (var j=0;j < oMode.length;j++) { oMode[j].className=''; } this.className='c_l_m_first'; switch(this.index){ case 0: Game.addInitCase1(); jiangjin.innerHTML='1800'; break; case 1: Game.addInitCase1(); jiangjin.innerHTML='18'; break; case 2: Game.addInitCase2(); jiangjin.innerHTML='7.8'; break; } Game.Data.length=0; Game.addRegulation(this.index); Game.getNumData(Game.step); Game.control(); } } },'addInitCase1':function(){ this.oNum.innerHTML=''; for (var i=0;i < this.alignArr.length ;i++ ) { var oNum_ul=document.createElement('ul'); var oNum_ul_div=document.createElement('div'); oNum_ul_div.innerHTML=this.alignArr[i]; oNum_ul_div.className='c_l_n_align'; oNum_ul.appendChild(oNum_ul_div); for (var j=0; j < 10;j++ ) { var oNum_ul_li=document.createElement('li'); oNum_ul_li.off=true; oNum_ul_li.className='li'+i; oNum_ul_li.innerHTML=j; oNum_ul.appendChild(oNum_ul_li); } var oNum_ul_Rdiv=document.createElement('div'); for (var z=0;z < this.btnArr.length ;z++ ) { var oSpan=document.createElement('span'); oSpan.className='span'+i; oSpan.innerHTML=this.btnArr[z]; oNum_ul_Rdiv.appendChild(oSpan); } oNum_ul_Rdiv.className='c_l_n_btn'; oNum_ul.appendChild(oNum_ul_Rdiv); this.oNum.appendChild(oNum_ul); } },'addInitCase2':function(){ this.oNum.innerHTML=''; var init1Arr=['大','单','双']; for (var i=0;i < this.alignArr.length-1;i++ ) { var oNum_ul=document.createElement('ul'); var oNum_ul_div=document.createElement('div'); oNum_ul_div.innerHTML=Game.alignArr[i]; oNum_ul_div.className='c_l_n_align'; oNum_ul.appendChild(oNum_ul_div); for (var j=0; j < init1Arr.length;j++ ) { var oNum_ul_li=document.createElement('li'); oNum_ul_li.off=true; oNum_ul_li.className='li'+i; oNum_ul_li.innerHTML=init1Arr[j]; oNum_ul.appendChild(oNum_ul_li); } var oNum_ul_Rdiv=document.createElement('div'); var oSpan=document.createElement('span'); oSpan.innerHTML=this.btnArr[5]; oSpan.className='span'+i; oNum_ul_Rdiv.appendChild(oSpan); oNum_ul_Rdiv.className='c_l_n_btn'; oNum_ul.appendChild(oNum_ul_Rdiv); this.oNum.appendChild(oNum_ul); } },'addRegulation':function(step){ var oP=document.getElementById('c_l_s_right'); var oHide=this.getClassName(oP,'c_l_s_r_hide'); var data=[ ['从百位、十位、个位各选一个号码组成一注。','从百位、十位、个位中选择一个3位数号码组成一注，所选号码与开奖号码后3位相同，且顺序一致，即为中奖。','投注方案：345
开奖号码：345，即中后三直选。'],['在百位、十位、个位任意位置上任意选择1个或1个以上号码。','从百位、十位、个位任意位置上至少选择1个以上号码，所选号码与相同位置上的开奖号码一致，即为中奖。','投注方案：百位 1
开奖号码：百位 1，即中定位胆百位。'],['从百位、十位中的“大、小、单、双”中至少各选一个组成一注。','对百位和十位的“大（56789）小（01234）、单（13579）双（02468）”形态进行购买，所选号码的位置、形态与开奖号码的位置、形态相同，即为中奖。','投注方案：小双
开奖号码：百位与十位“小双”，即中前二大小单双。'] ]; for (var i=0;i < oHide.length ;i++ ) { oHide[i].index=i; oHide[i].innerHTML=data[step][i]; oHide[i].parentNode.onmouSEOver=function(ev){ ev=ev||window.event; ev.preventDefault(); for (var j=0;j< oHide.length ;j++) { oHide[j].style.display='none'; } this.children[0].style.display='block'; } } for (var i=0;i < oHide.length ;i++ ) { oHide[i].parentNode.onmouSEOut=function(ev){ ev=ev||window.event; ev.preventDefault(); this.children[0].style.display='none'; } } },'getNumData':function(step){ var addBtn=document.getElementById('c_l_b_s_addNum'); var oText=document.getElementById('c_l_data'); var amount=document.getElementById('zhushu'); var money=document.getElementById('money'); var oInput=document.getElementById('c_l_b_f_beishu'); var oUl=this.oNum.children; this.Data[step]=[]; for (var i=0;i < oUl.length ;i++ ) { this.Data[step][i]=[]; this.select(this.getClassName(oUl[i],'li'+i),this.Data[step][i]); } addBtn.onclick=function(){ oText.innerHTML=''; Game.Data[Game.Data.length]=step; Game.targetData=addNum(Game.Data); /**************************/ if(Game.targetData.length){ switch(parseInt(step)){ case 0: Game.amountX=Game.targetData.length amount.innerHTML=Game.amountX; oText.innerHTML=Game.targetData; break; case 1: Game.amountX=Game.targetData.length; amount.innerHTML=Game.amountX; for (var i=0;i < Game.targetData.length;i++ ) { oText.innerHTML+=Game.targetData[i]+'n'; } break; case 2: Game.amountX=Game.targetData.length amount.innerHTML=Game.amountX; oText.innerHTML=Game.targetData; break; } Game.wanfa=step; money.innerHTML=Game.count.accMul(Game.num,Game.amountX*2*oInput.value); }else{ money.innerHTML = '0'; amount.innerHTML = '0'; alert('请选择正确的投注方式!'); } /**************************/ } function addNum(Data){ var n=parseInt(Data[Data.length-1]); switch(n){ case 0: return getResultOne(Data[n]); break; case 1: return getResultTwo(Data[n]); break; case 2: return getResultThree(Data[n]); break; } } function getResultOne(Arr){ var newArr=[]; if(Arr[0].length > 0 && Arr[1].length > 0 && Arr[2].length > 0){ for (var i=0;i < Arr[0].length;i++ ) { for (var j=0;j< Arr[1].length;j++ ) { for (var z=0;z< Arr[2].length;z++ ) { newArr.push(Arr[0][i]+''+Arr[1][j]+''+Arr[2][z]); } } } newArr.sort(function(a,b){ return a-b; }); return newArr; }else{ return false; } } function getResultTwo(Arr){ var strArr=['百位','个位']; var newArr=[]; for (var i=0;i < Arr.length ;i++ ) { if(Arr[i].length){ for (var j=0;j < Arr[i].length ;j++ ) { newArr.push(strArr[i]+' : '+Arr[i][j]) } }else{ continue; } } return newArr; } function getResultThree(Arr){ var newArr=[]; if(Arr[0].length > 0 && Arr[1].length > 0 ){ for (var i=0;i < Arr[0].length;i++ ) { for (var j=0;j< Arr[1].length;j++ ) { newArr.push(Arr[0][i]+''+Arr[1][j]); } } newArr.sort(function(a,b){ return a-b; }); return newArr; }else{ return false; } } },'select':function(obj,arr){ var oText=document.getElementById('c_l_data'); var three=['大','双']; for (var i=0;i},'controlFn':function(oLi,index){
var half=parseInt(oLi.length/2);
for (var i=0;i < oLi.length ;i++ )
{
switch(index)
{
case 0:
oLi[i].style.backgroundPosition='-2px -57px';
oLi[i].off = false;
Game.Data[Game.step][num].push(i);
break;
case 1:
if(i > half-1){
oLi[i].style.backgroundPosition='-2px -57px';
oLi[i].off = false;
Game.Data[Game.step][num].push(i);
}
break;
case 2:
if(i < half){
oLi[i].style.backgroundPosition='-2px -57px';
oLi[i].off = false;
Game.Data[Game.step][num].push(i);
}
break;
case 3:
var n=(i2)-1;
if (n > 0 && n < oLi.length){
oLi[n].style.backgroundPosition='-2px -57px';
oLi[n].off = false;
Game.Data[Game.step][num].push(n);
}
break;
case 4:
if(i2 < oLi.length-1){
oLi[i2].style.backgroundPosition='-2px -57px';
oLi[i2].off = false;
Game.Data[Game.step][num].push(i2);
}
break;
case 5:
oLi[i].style.backgroundPosition='-46px -57px';
oLi[i].off = true;
Game.Data[Game.step][num].length=0;
break;
}
}
},//倍数Input
'controlInput':function(amountX){
var money=document.getElementById('money');
var oInput=document.getElementById('c_l_b_f_beishu');
var oBtn=oInput.parentNode.getElementsByTagName('span');
for (var i=0;i < oBtn.length ;i++ )
{
oBtn[i].index=i;
oBtn[i].onclick=function(){
if(this.index){
if(oInput.value < 9999){
oInput.value++;
}
}else{
if(oInput.value > 0){
oInput.value--;
}
}
money.innerHTML=Game.count.accMul(Game.num,Game.amountX2oInput.value);
}
}
oInput.addEventListener('input',function(){
if(!this.value){
this.value=0;
}else{
if(this.value > 9999){
this.value=9999;
}else{
this.value=parseInt(this.value);
}
}
money.innerHTML=Game.count.accMul(Game.num,Game.amountX2this.value);
},false);
},'controlSelect':function(){
var oInput=document.getElementById('c_l_b_f_beishu');
var money=document.getElementById('money');
var oMode=document.getElementById('sel_mode');
oMode.addEventListener('input',function(){
switch(this.value){
case '1':
Game.num=1;
break;
case '2':
Game.num=0.1;
break;
case '3':
Game.num=0.01;
break;
}
money.innerHTML=Game.count.accMul(Game.num,Game.amountX2oInput.value);
},'empty':function(){
var oDiv=document.getElementById('c_l_number');
var emptyBtn=document.getElementById('c_l_b_delednum');
var oText=document.getElementById('c_l_data');
var money=document.getElementById('money');
var amount=document.getElementById('zhushu');
var listUl=document.getElementById('c_r_l_ul');
var oInput=document.getElementById('c_l_b_f_beishu');
var oMode=document.getElementById('sel_mode');
var jiangjin=document.getElementById('jiangjin');
var arr=['三星直选','定位胆','大小单双'];
emptyBtn.onclick=function(){
if(parseInt(money.innerHTML999)){
var json={a:jiangjin.innerHTML,b:amount.innerHTML,c:oInput.value,d:money.innerHTML,e:Game.targetData,f:Game.num};
Game.OrderArr.push(json);
var oLi=document.createElement('li');
oLi.innerHTML='<span data-step="'+Game.wanfa+'">'+arr[Game.wanfa]+''+amount.innerHTML+''+oInput.value+''+money.innerHTML+'<span class="list_close">×';
listUl.appendChild(oLi);
/****/
oDiv.innerHTML='';
oText.innerHTML='';
money.innerHTML='0';
amount.innerHTML='0';
switch(parseInt(Game.step)){
case 0:
Game.addInitCase1();
break;
case 1:
Game.addInitCase1();
break;
case 2:
Game.addInitCase2();
break;
}
Game.getNumData(Game.step);
Game.control();
Game.amountX=0;
if(Game.OrderArr.length){
Game.delOrder();
Game.pushIn();
}
}else{
if(parseInt(amount.innerHTML))
{
alert('提交注单失败，请您核实投注金额重新提交！');
}else{
alert('请您提交号码，再提交订单哟！');
}
}
}
},'delOrder':function(){
var oUl=document.getElementById('c_r_l_ul');
var closeBtn=this.getClassName(oUl,'list_close');
for (var i=0;i < closeBtn.length ;i++ )
{
closeBtn[i].index=i;
closeBtn[i].onclick=function(){
Game.OrderArr.splice(this.index,1);
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
},'pushIn':function(){
var supMoney=document.getElementById('supMoney');
var oPushBtn=document.getElementById('c_r_t_btn');
oPushBtn.onclick=function(){
var money=0;
var pM=Game.personMon.innerHTML;
if(Game.OrderArr.length){
for (var i=0;i < Game.OrderArr.length;i++ )
{
money=Game.count.accAdd(money,Game.OrderArr[i].d)
}
if(pM > money){
if(confirm('您选择'+Game.OrderArr.length+'个注单，投注总金额'+money+'元'))
{
Game.personMon.innerHTML=Game.count.accSubtr(pM,money);
supMoney.innerHTML='-'+money;
move(supMoney,{top:'50px',opacity:'0'},'50',function(){
supMoney.innerHTML='';
this.style.csstext='top:0;opacity:1;';
});
Game.kaijiang(Game.getAward);
}else{

}
}else{
alert('余额不足，请充值后再进行投注！');
}
}else{
alert('请您选择号码，提交注单后投注！');
}
}
},'kaijiang':function(callback){
var result=[];
var off=false;
var oSpan=document.getElementById('G_t_k_num').children;
var listUl=document.getElementById('c_r_l_ul');
for (var i= listUl.children.length-1 ;i >= 0; i-- )
{
listUl.children[i].parentNode.removeChild(listUl.children[i]);
}

for (var i=0;i < oSpan.length ;i++ )
{
oSpan[i].className='kaijiang';
oSpan[i].style.transitionDelay='0s';
}
setTimeout(function(){
for (var i=0;i < oSpan.length ;i++ )
{
var n=Math.floor(Math.random()10);
result.push(n);
oSpan[i].className='';
oSpan[i].style.transitionDelay=i0.3+'s';
oSpan[i].style.backgroundPosition=Game.numPos[n];
}
return callback(result);
},1500);
},'getAward':function(res){
var issue=document.getElementById('G_t_k_t_issue');
var oBox=document.getElementById('c_rrBox');
issue.innerHTML=addZero(Game.qishu);
if(oBox.children.length == 5){
var removeObj=oBox.children[4];
removeObj.parentNode.removeChild(removeObj);
}
var oLi=document.createElement('li');
oLi.innerHTML='<span class="qishu">'+addZero(Game.qishu)+'<span class="haoma">'+res+'';
if(oBox.children.length){
oBox.insertBefore(oLi,oBox.children[0])
}else{
oBox.appendChild(oLi);
}
function addZero(a){
a++;
if(a < 10){
return '00'+a;
}else if(a < 100){
return '0'+a;
}else{
return ''+a;
}
}
Game.qishu++;
Game.setMoney(res);
Game.targetData.length=0;
},'setMoney':function(res){
var addMoney=document.getElementById('addMoney');
var regB=/百位/,regS=/十位/,regG=/个位/;
var bArr=[],sArr=[],gArr=[];
var san=res[2]+""+res[3]+""+res[4];
var arr=[];
arr.push(((res[2]%2?'单':'双') + (res[3]%2?'单':'双')));
arr.push(((res[2]>4?'大':'小') + (res[3]%2?'单':'双')));
arr.push(((res[2]>4?'大':'小') + (res[3]>4?'大':'小')));
var moneyAward=0;
var n=null;
for (var i=0;i < this.OrderArr.length ;i++ )
{
n=this.OrderArr[i]
switch(n.a){
case '1800':
for (var z=0;z < n.e.length;z++ )
{
if(san == n.e[z]){
moneyAward=this.count.accAdd( moneyAward,this.count.accMul( n.an.c,n.f) );
break;
}
}
break;
case '18':
var k=0;
for (var z=0;z < n.e.length ;z++ )
{
if( regB.test(n.e[z]) ){
if( new RegExp(res[2]).test(n.e[z]) )
{
k++;
continue;
}
}else if( regS.test(n.e[z]) ){
if( new RegExp(res[3]).test(n.e[z]) )
{
k++;
continue;
}
}else if( regG.test(n.e[z]) ){
if( new RegExp(res[4]).test(n.e[z]) )
{
k++;
continue;
}
}
}
moneyAward=this.count.accAdd( moneyAward,this.count.accMul( n.f,n.akn.c ) );
break;
case '7.8':
//中奖注数初始值
var j=0;
for (var z=0;z < n.e.length;z++ )
{
for(var x=0;x < arr.length;x++){
if(n.e[z] == arr[x] )
{
j++;
continue;
}
}
}
moneyAward=this.count.accAdd( moneyAward,n.ajn.c ) );
break;
}
}
if(moneyAward){
addMoney.innerHTML='+'+moneyAward;
move(addMoney,{top:'-50px',function(){
addMoney.innerHTML='';
this.style.csstext='top:0;opacity:1;';
});
}
this.personMon.innerHTML=this.count.accAdd(this.personMon.innerHTML,moneyAward);
this.OrderArr.length=0;
},'getClassName':function(obj,cName){
var obj= obj || document;
if(obj.getElementsByClassName)
{
return obj.getElementsByClassName(cName);
}else{
var arr=[];
var allE=obj.getElementsByTagName('');
for (var i=0;i<allE.length;i++ )
{
var allElements=allE[i].className.split(' ');
for (var j=0;j<allElements.length;j++)
{
if(allElements[j].className==cName)
{
arr.push(allE[i]);
break;
}
}
}
return arr;
}
},'count':{
//乘
'accMul':function(a,b)
{
var m=0,s1=a.toString(),s2=b.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))Number(s2.replace(".",""))/Math.pow(10,m)
},//除
'accDiv':function(a,b){
var t1=0,t2=0,r1,r2;
try{t1=a.toString().split(".")[1].length}catch(e){}
try{t2=b.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(a.toString().replace(".",""))
r2=Number(b.toString().replace(".",""))
return (r1/r2)pow(10,t2-t1);
}
},//加
'accAdd':function(a,b){
var r1,r2,m;
try{r1=a.toString().split(".")[1].length}catch(e){r1=0}
try{r2=b.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (am+bm)/m;
},//减
'accSubtr':function(a,b){
var r1,m,n;
try{r1=a.toString().split(".")[1].length}catch(e){r1=0}
try{r2=b.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,r2));
n=(r1>=r2)?r1:r2;
return ((am-bm)/m).toFixed(n);
}
}
}

sports-1.0-js.js

rush:js;"> function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function move(obj,json,fn){ var timer=null,attr=null;iCur=null,iTarget=null,iSpeed=null; clearInterval(obj.timer); obj.timer=setInterval(function(){ var onOff=true; for(attr in json){ iTarget=json[attr]; iTarget=parseInt(iTarget); if(attr=="opacity"){ iCur=parseInt(parseFloat(getStyle(obj,attr)*100)); if(isNaN(iCur)){ iCur=100; } }else{ iCur=parseInt(getStyle(obj,attr)); } if(iCurMath.abs(iTarget-iCur)){ obj.style[attr]=iTarget+"px"; } } } } if(onOff){ clearInterval(obj.timer); fn&&fn.call(obj); } },30); }
JavaScriptjs彩票彩票彩票投注彩票投注效果

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...