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

2024-03-12 05:57:05 262

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

主要功能：

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

实现原理：

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

下面是完整JS代码：

index.html

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>彩票--德芙</title>
<linkrel="stylesheet"type='text/css'href="css/index.css"/>
<scripttype="text/javascript"src='js/sports-1.0-js.js'></script>
</head>
<body>
<divid='Game'>
<divclass='G_top'>
<divclass="G_t_title">
<h1class='G_t_t_logo'>TanZhouCaiPiao</h1>
<pclass='text'>付出不亚于任何人的努力！</p>
</div>
<divclass='G_t_kaijiang'>
<pclass='G_t_k_title'>潭州彩票<spanclass='G_t_k_t_issue'id='G_t_k_t_issue'></span>期</p>
<divclass='G_t_k_num'id='G_t_k_num'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<divclass="G_t_user">
<divclass='G_t_u_name'>德芙纵享丝滑</div>
<divclass='G_t_u_buy'>
￥
<spanclass='G_t_u_money'id='G_t_u_money'>1314.51</span>
</div>
<divclass='supMoney'id='supMoney'>
</div>
<divclass='addMoney'id='addMoney'>
</div>
</div>
</div>
<divid="content">
<divclass='c_left'>
<divclass='c_l_mode'id='c_l_mode'>
<spanclass='c_l_m_first'>三星</span>
<span>定位胆</span>
<span>大小单双</span>
</div>
<divclass="c_l_shuoming">
<divclass="c_l_s_right"id='c_l_s_right'>
<ahref="javascript:void(0)">选号规则
<divclass='c_l_s_r_hide'>
</div>
</a>
<ahref="javascript:void(0)">中奖说明
<divclass='c_l_s_r_hide'>
</div>
</a>
<ahref="javascript:void(0)">投注案例
<divclass='c_l_s_r_hide'>

</div>
</a>
</div>
</div>
<divclass='c_l_number'id='c_l_number'>
</div>
<divclass='c_l_bottom'>
<divclass='c_l_b_function'>
<spanclass="c_l_b_f_sup"></span>
<inputtype="text"class='c_l_b_f_beishu'id='c_l_b_f_beishu'value='1'/>
<spanclass="c_l_b_f_add"></span>
<i>倍</i>
<selectname="sel_mode"id="sel_mode"class="c_l_b_f_sel">
<optionvalue="1">元</option>
<optionvalue="2">角</option>
<optionvalue="3">分</option>
</select>
<pclass='c_l_b_f_jiangjin'>奖金：<spanid='jiangjin'>1800</span></p>
<pclass="c_l_b_f_data">选择<spanclass='c_l_b_f_d_num'id='zhushu'>0</span>注，共￥<spanclass='c_l_b_f_d_num'id='money'>0</span>元</p>
</div>
<divclass='c_l_b_submit'>
<inputtype="submit"value='添加号码'id='c_l_b_s_addNum'/>
</div>
<inputtype="button"value='提交注单'id='c_l_b_deledNum'class='c_l_b_deledNum'/>
</div>
<textareaid='c_l_data'class='c_l_data'readonly></textarea>
</div>
<divclass='c_right'>
<divclass="c_r_rus">
<divclass="c_r_r_qihao">开奖期号</div>
<divclass="c_r_r_haoma">开奖号码</div>
<ulid='c_r_r_box'>
</ul>
</table>
</div>
<divclass="c_r_list">
<divclass="c_r_l_title">
<span>玩法</span>
<span>注数</span>
<span>倍数</span>
<span>金额</span>
<spanclass='close'></span>
</div>
<ulid='c_r_l_ul'>
</ul>
</div>
<divclass="c_r_touzhu">
<inputtype="button"value='立即投注'id='c_r_t_btn'class='c_r_t_btn'/>
</div>
</div>
</div>
</div>
<divclass='explain'>
<h2>介绍说明</h2>
<divid='toggleMove'class='arrow'></div>
<p><span>投注方式：</span>请您选择您的投注号码后‘添加号码'==>‘提交注单'==>‘立即投注'</p>
<p><span>三星玩法：</span>至少需要在‘百位'、‘十位'、‘个位'三个位置中选择一个号码投注，开奖号码后三位与您投注号码一致即中奖</p>
<p><span>定位胆玩法：</span>从任意一个位置选择一个号码即可投注，开奖号码与投注号码的位置、号码相同即中奖</p>
<p><span>大小单双玩法：</span>至少需要在‘百位'、‘十位'中选择一个号码投注，开奖号码与投注号码的位置、形态相同即中奖</p>
<p><span>功能：</span>可自由选择投注模式、倍数，可点击‘&times;'删除提交注单</p>
<p><span>扩展：</span>可使用jsonp引用官方彩票开奖数据（实时开奖），更多玩法添加请联系我</p>
<p><span>Author:</span>Thompson德芙</p>
<p><span>转载：</span></p>
</div>
<scripttype="text/javascript"src='js/index.js'></script>
</body>
</html>

index.css

@charset="UTF-8";
html,body,ul,li,a,i,div,img,span,p{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
i{font-style:normal;}
body{
background:url('../img/bg.jpg');
font-family:'Microsoftyahei';
}
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:"";
clear:both;
height:0;
}
.explain{
height:242px;
position:absolute;
top:-242px;
right:10%;
background:rgba(0,0,0,0.5);
border-radius:5px;
font-size:12px;
padding:10px;
margin:0auto;
color:#fff;
}
#toggleMove{
height:20px;
width:100%;
text-align:center;
position:absolute;
cursor:pointer;
transform:scale(1.5);
}
.arrow{
background:url(../img/arrow.png)no-repeatcenter0;
bottom:0;
}
.close{
background:url(../img/arrow.png)no-repeatcenter-40px;
bottom:-18px;
}
.explainh2{
text-align:center;
}
.explainp{
margin:5px;
}
.explainpspan{
color:#ffff33;
margin-right:10px;
}
#Game{
width:1000px;
height:500px;
margin:50pxauto200px;
}
#Game.G_top{
width:100%;
height:120px;
position:relative;
}
#Game.G_top.G_t_title{
width:600px;
height:120px;
position:absolute;
top:0;
left:0;
}
#Game.G_top.G_t_title.text{
width:100%;
position:absolute;
left:0;
bottom:0;
font-size:24px;
color:#fff;
font-weight:bold;
text-shadow:001pxcurrentColor,1px1px1pxrgba(50,93,164,0.8),2px2px3pxrgba(50,93,164,0.8),3px3px4pxrgba(50,93,164,0.8),4px4px5pxrgba(50,93,164,0.8);
}
#Game.G_top.G_t_title.G_t_t_logo{
width:100%;
height:100px;
font-size:50px;
font-weight:bold;
color:rgba(41,76,138,0.8);
margin:0;
letter-spacing:6px;
text-shadow:001pxcurrentColor,2px01px#083058,02px1pxrgba(41,76,138,0.8),2px1px1px#083058,1px2px1px#98c0e8,2px2px1px#487098,3px1px1px#083058,1px3px1pxrgba(41,76,138,0.8),3px2px1px#083058,2px3px1pxrgba(41,76,138,0.8),3px3px1px#487098,4px2px1px#083058,2px4px1pxrgba(41,76,138,0.8),4px3px1px#083058,3px4px1pxrgba(41,76,138,0.8),4px4px1px#487098,5px3px1px#083058,3px5px1px#98c0e8,5px4px1px#083058,4px5px1pxrgba(41,76,138,0.8),5px5px1px#487098,6px4px1px#083058,4px6px1pxrgba(41,76,138,0.8),6px5px1px#083058,5px6px1pxrgba(41,76,138,0.8),6px6px1px#487098,7px5px1px#083058,5px7px1px#98c0e8,7px6px1px#083058,6px7px1px#98c0e8,7px7px1px#487098,8px6px1px#083058,6px8px1px#98c0e8,8px7px1px#083058,7px8px1px#98c0e8,8px8px1px#487098,9px7px1px#083058,7px9px1px#98c0e8,9px8px1px#083058,8px9px1px#98c0e8,9px9px1px#487098,10px8px1px#083058,8px10px1px#98c0e8,10px9px1px#083058,9px10px1px#98c0e8,10px10px1px#487098,11px9px1px#083058,9px11px1px#98c0e8,11px10px1px#083058,10px11px1px#98c0e8,11px11px1px#487098,11px11px1px#666,11px12px1px#666,10px12px1px#666,9px12px1px#666,8px11px1px#666,7px10px1px#666,6px9px1px#666,5px8px1px#666,4px7px1px#666,3px6px1px#666,2px5px1px#666,1px4px1px#666,03px1px#666,-1px2px1px#666,20px8px8pxrgba(0,0,0,.7);
}
h1:before,h1:after{
content:'TanZhouCaiPiao';
position:absolute;
top:0;
left:0;
right:0;
color:rgba(41,76,138,0.8);
text-shadow:001pxcurrentColor,-1px-1px1px#003,0-1px1px#003,1px-1px1px#003,1px01px#003,1px1px1px#003,01px1px#003,-1px1px1px#003,-1px01px#003;
}
h1:after{
color:rgba(40,80,120,.1);
text-shadow:1px-1px1pxrgba(40,80,120,.8),-1px1px1pxrgba(255,255,255,.8);
}
#Game.G_top.G_t_kaijiang{
width:360px;
height:110px;
background:rgba(41,76,138,0.8);
padding:5px;
position:absolute;
right:0;top:0;
}
#Game.G_top.G_t_kaijiang.G_t_k_title{
width:360px;
line-height:20px;
background:rgba(51,51,51,0.8);
color:#fff;
font-size:14px;
text-align:center;
}
#Game.G_top.G_t_kaijiang.G_t_k_title.G_t_k_t_issue{
margin:05px;
color:#399;
}
#Game.G_top.G_t_kaijiang.G_t_k_num{
width:100%;
height:90px;

}
#Game.G_top.G_t_kaijiang.G_t_k_numspan{
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_numspan.kaijiang{
background:url('../img/mv.gif');
background-position:'0px0px';
}
#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,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:2px10px2px0px;
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_leftspan.c_l_m_first{
background:rgba(31,58,110,1);
}
#content.c_left.c_l_mode>span:hover{
background:rgba(31,58,110,1);
}
#content.c_left.c_l_shuoming{
margin-top:10px;
width:100%;
height:44px;
background:rgba(0,0,0,0.8);
border-radius:5px;
}
#content.c_left.c_l_shuoming.c_l_s_right{
width:260px;
height:20px;
float:right;
margin:11px10px11px0px;
}
#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,76,138,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:010px;
}
#content.c_left.c_l_numberul{
width:660px;
height:50px;
}
#content.c_left.c_l_numberul: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_numberulli{
float:left;
width:43px;
height:43px;
border-radius:50%;
line-height:43px;
color:#fff;
text-align:center;
cursor:pointer;
margin:3px5px4px0px;
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,93,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,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_functioni{
float:left;
margin:05px;
}
#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:5px20px;
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_jiangjinspan{
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:05px;
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,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:'Microsoftyahei';
background:rgba(50,93,164,0.8);
border:none;
color:#fff;
cursor:pointer;
}
#content.c_left.c_l_bottom.c_l_b_submit>input:hover{
background:rgba(50,93,164,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:'Microsoftyahei';
background:rgba(50,93,164,0.8);
border:none;
color:#fff;
cursor:pointer;
outline:none;
}
#content.c_left.c_l_bottom.c_l_b_deledNum:hover{
background:rgba(50,93,164,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,0,0.8);
border:none;
color:#fff;
padding:5px10px;
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,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_rusul{
width:100%;
position:absolute;
top:30px;left:0;
color:#fff;
}
#content.c_right.c_r_rusulli{
height:30px;
width:100%;
}
#content.c_right.c_r_rusullispan{
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:20pxauto;
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_titlespan{
display:inline-block;
width:60px;
text-align:center;
line-height:20px;
color:#ff6700;
}
#content.c_right.c_r_listulli{
width:100%;
height:20px;
}
#content.c_right.c_r_listullispan{
display:inline-block;
width:60px;
text-align:center;
line-height:20px;
margin-right:4px;
}
#content.c_right.c_r_listullispan.list_close{
width:20px;
height:20px;
text-align:right;
cursor:pointer;
color:#ff6700;
}
#content.c_right.c_r_l_titlespan.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_touzhuspan{
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:15px0;
}*/
#content.c_right.c_r_touzhu.c_r_t_btn{
width:100%;
height:50px;
background:rgba(50,93,164,0.8);
border:none;
border-radius:5px;
color:#fff;
font-size:26px;
font-family:'Microsoftyahei';
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,93,164,1);
}

index.js

window.onload=function(){
vartoggleMove=document.getElementById('toggleMove');
vartoggleOff=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,{'top':'0px'},'10');
this.className='arrow';
toggleOff=!toggleOff;
}
}
}
varGame={
'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(){
varoMode=document.getElementById('c_l_mode').getElementsByTagName('span');
varjiangjin=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(vari=0;i<oMode.length;i++)
{
oMode[i].index=i;
oMode[i].onclick=function(){
Game.step=this.index;
for(varj=0;j<oMode.length;j++)
{
oMode[j].className='';
}
this.className='c_l_m_first';
switch(this.index){
case0:
Game.addInitCase1();
jiangjin.innerHTML='1800';
break;
case1:
Game.addInitCase1();
jiangjin.innerHTML='18';
break;
case2:
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(vari=0;i<this.alignArr.length;i++)
{
varoNum_ul=document.createElement('ul');
varoNum_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(varj=0;j<10;j++)
{
varoNum_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);
}
varoNum_ul_Rdiv=document.createElement('div');
for(varz=0;z<this.btnArr.length;z++)
{
varoSpan=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='';
varinit1Arr=['大','小','单','双'];
for(vari=0;i<this.alignArr.length-1;i++)
{
varoNum_ul=document.createElement('ul');
varoNum_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(varj=0;j<init1Arr.length;j++)
{
varoNum_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);
}
varoNum_ul_Rdiv=document.createElement('div');
varoSpan=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){
varoP=document.getElementById('c_l_s_right');
varoHide=this.getClassName(oP,'c_l_s_r_hide');
vardata=[
['从百位、十位、个位各选一个号码组成一注。','从百位、十位、个位中选择一个3位数号码组成一注，所选号码与开奖号码后3位相同，且顺序一致，即为中奖。','投注方案：345</br>开奖号码：345，即中后三直选。'],
['在百位、十位、个位任意位置上任意选择1个或1个以上号码。','从百位、十位、个位任意位置上至少选择1个以上号码，所选号码与相同位置上的开奖号码一致，即为中奖。','投注方案：百位1</br>开奖号码：百位1，即中定位胆百位。'],
['从百位、十位中的“大、小、单、双”中至少各选一个组成一注。','对百位和十位的“大（56789）小（01234）、单（13579）双（02468）”形态进行购买，所选号码的位置、形态与开奖号码的位置、形态相同，即为中奖。','投注方案：小双</br>开奖号码：百位与十位“小双”，即中前二大小单双。']
];
for(vari=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(varj=0;j<oHide.length;j++)
{
oHide[j].style.display='none';
}
this.children[0].style.display='block';
}
}
for(vari=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){
varaddBtn=document.getElementById('c_l_b_s_addNum');
varoText=document.getElementById('c_l_data');
varamount=document.getElementById('zhushu');
varmoney=document.getElementById('money');
varoInput=document.getElementById('c_l_b_f_beishu');
varoUl=this.oNum.children;
this.Data[step]=[];
for(vari=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)){
case0:
Game.amountX=Game.targetData.length
amount.innerHTML=Game.amountX;
oText.innerHTML=Game.targetData;
break;
case1:
Game.amountX=Game.targetData.length;
amount.innerHTML=Game.amountX;
for(vari=0;i<Game.targetData.length;i++)
{
oText.innerHTML+=Game.targetData[i]+'n';
}
break;
case2:
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('请选择正确的投注方式!');
}
/**************************/
}
functionaddNum(Data){
varn=parseInt(Data[Data.length-1]);
switch(n){
case0:
returngetResultOne(Data[n]);
break;
case1:
returngetResultTwo(Data[n]);
break;
case2:
returngetResultThree(Data[n]);
break;
}
}
functiongetResultOne(Arr){
varnewArr=[];
if(Arr[0].length>0&&Arr[1].length>0&&Arr[2].length>0){
for(vari=0;i<Arr[0].length;i++)
{
for(varj=0;j<Arr[1].length;j++)
{
for(varz=0;z<Arr[2].length;z++)
{
newArr.push(Arr[0][i]+''+Arr[1][j]+''+Arr[2][z]);
}
}
}
newArr.sort(function(a,b){
returna-b;
});
returnnewArr;
}else{
returnfalse;
}
}
functiongetResultTwo(Arr){
varstrArr=['百位','十位','个位'];
varnewArr=[];
for(vari=0;i<Arr.length;i++)
{
if(Arr[i].length){
for(varj=0;j<Arr[i].length;j++)
{
newArr.push(strArr[i]+':'+Arr[i][j])
}
}else{
continue;
}
}
returnnewArr;
}
functiongetResultThree(Arr){
varnewArr=[];
if(Arr[0].length>0&&Arr[1].length>0){
for(vari=0;i<Arr[0].length;i++)
{
for(varj=0;j<Arr[1].length;j++)
{
newArr.push(Arr[0][i]+''+Arr[1][j]);
}
}
newArr.sort(function(a,b){
returna-b;
});
returnnewArr;
}else{
returnfalse;
}
}
},
'select':function(obj,arr){
varoText=document.getElementById('c_l_data');
varthree=['大','小','单','双'];
for(vari=0;i<obj.length;i++)
{
obj[i].index=i;
obj[i].off=true;
obj[i].onclick=function(){
varoSpan=this.parentNode.getElementsByTagName('span');
for(vari=0;i<oSpan.length;i++)
{
oSpan[i].style.background='#4a433c';
}
if(this.off){
this.style.backgroundPosition='-2px-57px';
arr.push(obj[this.index].innerHTML);
this.off=!this.off;
}else{
this.style.backgroundPosition='-46px-57px';
if(arr.length){
for(varj=0;j<arr.length;j++)
{
if(Game.step==2){
if(arr[j]==three[this.index]){
arr.splice(j,1);
}
}else{
if(arr[j]==this.index){
arr.splice(j,1);
}
}
}
}
this.off=!this.off;
}
}
}
},
'control':function(){
varoSpan,num;
varcontrolDiv=this.getClassName(this.oNum,'c_l_n_btn');
for(vari=0;i<controlDiv.length;i++)
{
controlDiv[i].index=i;
oSpan=this.getClassName(controlDiv[i],'span'+i);
for(varj=0;j<oSpan.length;j++)
{
oSpan[j].index=j
oSpan[j].onclick=function(){
num=this.parentNode.index;
Game.Data[Game.step][num].length=0;
varoParent=this.parentNode.parentNode;
varoLi=oParent.getElementsByTagName('li');
for(varz=0;z<oLi.length;z++)
{
oLi[z].style.backgroundPosition='-46px-57px';
oLi[z].off=true;
}
if(Game.step!=2){
varsiblings=this.parentNode.children;
for(varz=0;z<siblings.length;z++)
{
siblings[z].style.background='#4a433c';
}
Game.controlFn(oLi,num,this.index);
}
this.style.background='rgb(50,93,164)';
}
}
}

},
'controlFn':function(oLi,num,index){
varhalf=parseInt(oLi.length/2);
for(vari=0;i<oLi.length;i++)
{
switch(index)
{
case0:
oLi[i].style.backgroundPosition='-2px-57px';
oLi[i].off=false;
Game.Data[Game.step][num].push(i);
break;
case1:
if(i>half-1){
oLi[i].style.backgroundPosition='-2px-57px';
oLi[i].off=false;
Game.Data[Game.step][num].push(i);
}
break;
case2:
if(i<half){
oLi[i].style.backgroundPosition='-2px-57px';
oLi[i].off=false;
Game.Data[Game.step][num].push(i);
}
break;
case3:
varn=(i*2)-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;
case4:
if(i*2<oLi.length-1){
oLi[i*2].style.backgroundPosition='-2px-57px';
oLi[i*2].off=false;
Game.Data[Game.step][num].push(i*2);
}
break;
case5:
oLi[i].style.backgroundPosition='-46px-57px';
oLi[i].off=true;
Game.Data[Game.step][num].length=0;
break;
}
}
},
//倍数Input
'controlInput':function(amountX){
varmoney=document.getElementById('money');
varoInput=document.getElementById('c_l_b_f_beishu');
varoBtn=oInput.parentNode.getElementsByTagName('span');
for(vari=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.amountX*2*oInput.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.amountX*2*this.value);
},false);
},
'controlSelect':function(){
varoInput=document.getElementById('c_l_b_f_beishu');
varmoney=document.getElementById('money');
varoMode=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.amountX*2*oInput.value);
},false);
},
'empty':function(){
varoDiv=document.getElementById('c_l_number');
varemptyBtn=document.getElementById('c_l_b_deledNum');
varoText=document.getElementById('c_l_data');
varmoney=document.getElementById('money');
varamount=document.getElementById('zhushu');
varlistUl=document.getElementById('c_r_l_ul');
varoInput=document.getElementById('c_l_b_f_beishu');
varoMode=document.getElementById('sel_mode');
varjiangjin=document.getElementById('jiangjin');
vararr=['三星直选','定位胆','大小单双'];
emptyBtn.onclick=function(){
if(parseInt(money.innerHTML*999)){
varjson={a:jiangjin.innerHTML,b:amount.innerHTML,c:oInput.value,d:money.innerHTML,e:Game.targetData,f:Game.num};
Game.OrderArr.push(json);
varoLi=document.createElement('li');
oLi.innerHTML='<spandata-step="'+Game.wanfa+'">'+arr[Game.wanfa]+'</span><span>'+amount.innerHTML+'</span><span>'+oInput.value+'</span><span>'+money.innerHTML+'</span><spanclass="list_close">&times;</span>';
listUl.appendChild(oLi);
/************************************************************/
oDiv.innerHTML='';
oText.innerHTML='';
money.innerHTML='0';
amount.innerHTML='0';
switch(parseInt(Game.step)){
case0:
Game.addInitCase1();
break;
case1:
Game.addInitCase1();
break;
case2:
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(){
varoUl=document.getElementById('c_r_l_ul');
varcloseBtn=this.getClassName(oUl,'list_close');
for(vari=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(){
varsupMoney=document.getElementById('supMoney');
varoPushBtn=document.getElementById('c_r_t_btn');
oPushBtn.onclick=function(){
varmoney=0;
varpM=Game.personMon.innerHTML;
if(Game.OrderArr.length){
for(vari=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){
varresult=[];
varoff=false;
varoSpan=document.getElementById('G_t_k_num').children;
varlistUl=document.getElementById('c_r_l_ul');
for(vari=listUl.children.length-1;i>=0;i--)
{
listUl.children[i].parentNode.removeChild(listUl.children[i]);
}

for(vari=0;i<oSpan.length;i++)
{
oSpan[i].className='kaijiang';
oSpan[i].style.transitionDelay='0s';
}
setTimeout(function(){
for(vari=0;i<oSpan.length;i++)
{
varn=Math.floor(Math.random()*10);
result.push(n);
oSpan[i].className='';
oSpan[i].style.transitionDelay=i*0.3+'s';
oSpan[i].style.backgroundPosition=Game.numPos[n];
}
returncallback(result);
},1500);
},
'getAward':function(res){
varissue=document.getElementById('G_t_k_t_issue');
varoBox=document.getElementById('c_r_r_box');
issue.innerHTML=addZero(Game.qishu);
if(oBox.children.length==5){
varremoveObj=oBox.children[4];
removeObj.parentNode.removeChild(removeObj);
}
varoLi=document.createElement('li');
oLi.innerHTML='<spanclass="qishu">'+addZero(Game.qishu)+'</span><spanclass="haoma">'+res+'</span>';
if(oBox.children.length){
oBox.insertBefore(oLi,oBox.children[0])
}else{
oBox.appendChild(oLi);
}
functionaddZero(a){
a++;
if(a<10){
return'00'+a;
}elseif(a<100){
return'0'+a;
}else{
return''+a;
}
}
Game.qishu++;
Game.setMoney(res);
Game.targetData.length=0;
},
'setMoney':function(res){
varaddMoney=document.getElementById('addMoney');
varregB=/百位/,regS=/十位/,regG=/个位/;
varbArr=[],sArr=[],gArr=[];
varsan=res[2]+""+res[3]+""+res[4];
vararr=[];
arr.push(((res[2]%2?'单':'双')+(res[3]%2?'单':'双')));
arr.push(((res[2]>4?'大':'小')+(res[3]%2?'单':'双')));
arr.push(((res[2]>4?'大':'小')+(res[3]>4?'大':'小')));
varmoneyAward=0;
varn=null;
for(vari=0;i<this.OrderArr.length;i++)
{
n=this.OrderArr[i]
switch(n.a){
case'1800':
for(varz=0;z<n.e.length;z++)
{
if(san==n.e[z]){
moneyAward=this.count.accAdd(moneyAward,this.count.accMul(n.a*n.c,n.f));
break;
}
}
break;
case'18':
vark=0;
for(varz=0;z<n.e.length;z++)
{
if(regB.test(n.e[z])){
if(newRegExp(res[2]).test(n.e[z]))
{
k++;
continue;
}
}elseif(regS.test(n.e[z])){
if(newRegExp(res[3]).test(n.e[z]))
{
k++;
continue;
}
}elseif(regG.test(n.e[z])){
if(newRegExp(res[4]).test(n.e[z]))
{
k++;
continue;
}
}
}
moneyAward=this.count.accAdd(moneyAward,this.count.accMul(n.f,n.a*k*n.c));
break;
case'7.8':
//中奖注数初始值
varj=0;
for(varz=0;z<n.e.length;z++)
{
for(varx=0;x<arr.length;x++){
if(n.e[z]==arr[x])
{
j++;
continue;
}
}
}
moneyAward=this.count.accAdd(moneyAward,this.count.accMul(n.f,n.a*j*n.c));
break;
}
}
if(moneyAward){
addMoney.innerHTML='+'+moneyAward;
move(addMoney,{top:'-50px',opacity:'0'},'50',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){
varobj=obj||document;
if(obj.getElementsByClassName)
{
returnobj.getElementsByClassName(cName);
}else{
vararr=[];
varallE=obj.getElementsByTagName('*');
for(vari=0;i<allE.length;i++)
{
varallElements=allE[i].className.split('');
for(varj=0;j<allElements.length;j++)
{
if(allElements[j].className==cName)
{
arr.push(allE[i]);
break;
}
}
}
returnarr;
}
},
'count':{
//乘
'accMul':function(a,b)
{
varm=0,s1=a.toString(),s2=b.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
returnNumber(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
},
//除
'accDiv':function(a,b){
vart1=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){
varr1,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(a*m+b*m)/m;
},
//减
'accSubtr':function(a,b){
varr1,r2,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,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return((a*m-b*m)/m).toFixed(n);
}
}
}

sports-1.0-js.js

functiongetStyle(obj,attr){
	if(obj.currentStyle){
		returnobj.currentStyle[attr];
	}else{
		returngetComputedStyle(obj,false)[attr];
	}
}
functionmove(obj,json,num,fn){
	vartimer=null,attr=null;iCur=null,iTarget=null,iSpeed=null;
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		varonOff=true;
		for(attrinjson){
			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(iCur<iTarget){
				iSpeed=Math.ceil((iTarget-iCur)/num);
			}else{
				iSpeed=Math.floor((iTarget-iCur)/num);
			}
			if(iCur!=iTarget){
				onOff=false;
				if(attr=="opacity"){
					obj.style[attr]=(iCur+iSpeed)/100;
					obj.style.filter="alpha(opacity=iCur+iSpeed)";
				}else{
					obj.style[attr]=iCur+iSpeed+"px";
					if(Math.abs(iSpeed)>Math.abs(iTarget-iCur)){
						obj.style[attr]=iTarget+"px";
					}
				}
			}
		}
		if(onOff){
			clearInterval(obj.timer);
			fn&&fn.call(obj);
		}
	},30);
}

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

热门推荐

随机推荐