原生JS实现网络彩票投注效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了原生JS实现网络彩票投注效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含32979字，纯文字阅读大概需要48分钟。
内容图文
个人游戏之作，小伙伴们研究下就好
主要功能：
1、可自由选择投注模式、倍数，可点击‘×'删除提交注单。
2、可使用jsonp引用官方彩票开奖数据（实时开奖）。
3、结合后台可实现官彩同样的效果。
实现原理：
单纯使用Js实现，这里主要用数组存放数据，随机生成开奖号码，然后进行判断是否中奖。
下面是完整JS代码：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>彩票--德芙</title>
<link rel="stylesheet" type='text/css' href="css/index.css" />
<script type="text/javascript" src='js/sports-1.0-js.js'></script>
</head>
<body>
<div id='Game'>
<div class='G_top'>
<div class="G_t_title">
<h1 class='G_t_t_logo'>TanZhouCaiPiao</h1>
<p class='text'>付出不亚于任何人的努力！</p>
</div>
<div class='G_t_kaijiang'>
<p class='G_t_k_title'>潭州彩票<span class='G_t_k_t_issue' id='G_t_k_t_issue'></span>期</p>
<div class='G_t_k_num' id='G_t_k_num'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="G_t_user">
<div class='G_t_u_name'>德芙纵享丝滑</div>
<div class='G_t_u_buy'>
￥
<span class='G_t_u_money' id='G_t_u_money'>1314.51</span>
</div>
<div class='supMoney' id='supMoney'>
</div>
<div class='addMoney' id='addMoney'>
</div>
</div>
</div>
<div id="content">
<div class='c_left'>
<div class='c_l_mode' id='c_l_mode'>
<span class='c_l_m_first'>三星</span>
<span>定位胆</span>
<span>大小单双</span>
</div>
<div class="c_l_shuoming">
<div class="c_l_s_right" id='c_l_s_right'>
<a href="javascript:void(0)">选号规则
<div class='c_l_s_r_hide'>
</div>
</a>
<a href="javascript:void(0)">中奖说明
<div class='c_l_s_r_hide'>
</div>
</a>
<a href="javascript:void(0)">投注案例
<div class='c_l_s_r_hide'>
</div>
</a>
</div>
</div>
<div class='c_l_number' id='c_l_number'>
</div>
<div class='c_l_bottom'>
<div class='c_l_b_function'>
<span class="c_l_b_f_sup"></span>
<input type="text" class='c_l_b_f_beishu' id='c_l_b_f_beishu' value='1'/>
<span class="c_l_b_f_add"></span>
<i>倍</i>
<select name="sel_mode" id="sel_mode" class="c_l_b_f_sel">
<option value="1">元</option>
<option value="2">角</option>
<option value="3">分</option>
</select>
<p class='c_l_b_f_jiangjin'>奖金：<span id='jiangjin'>1800</span></p>
<p class="c_l_b_f_data">选择<span class='c_l_b_f_d_num' id='zhushu'>0</span>注，共 ￥ <span class='c_l_b_f_d_num' id='money'>0</span>元</p>
</div>
<div class='c_l_b_submit'>
<input type="submit" value='添加号码' id='c_l_b_s_addNum'/>
</div>
<input type="button" value='提交注单' id='c_l_b_deledNum' class='c_l_b_deledNum'/>
</div>
<textarea id='c_l_data' class='c_l_data' readonly></textarea>
</div>
<div class='c_right'>
<div class="c_r_rus">
<div class="c_r_r_qihao">开奖期号</div>
<div class="c_r_r_haoma">开奖号码</div>
<ul id='c_r_r_box'>
</ul>
</table>
</div>
<div class="c_r_list">
<div class="c_r_l_title">
<span>玩法</span>
<span>注数</span>
<span>倍数</span>
<span>金额</span>
<span class='close'></span>
</div>
<ul id='c_r_l_ul'>
</ul>
</div>
<div class="c_r_touzhu">
<input type="button" value='立即投注' id='c_r_t_btn' class='c_r_t_btn'/>
</div>
</div>
</div>
</div>
<div class='explain'>
<h2>介绍说明</h2>
<div id='toggleMove' class='arrow'></div>
<p><span>投注方式：</span>请您选择您的投注号码后‘添加号码'==>‘提交注单'==>‘立即投注'</p>
<p><span>三星玩法：</span>至少需要在‘百位'、‘十位'、‘个位'三个位置中选择一个号码投注，开奖号码后三位与您投注号码一致即中奖</p>
<p><span>定位胆玩法：</span>从任意一个位置选择一个号码即可投注，开奖号码与投注号码的位置、号码相同即中奖</p>
<p><span>大小单双玩法：</span>至少需要在‘百位'、‘十位'中选择一个号码投注，开奖号码与投注号码的位置、形态相同即中奖</p>
<p><span>功能：</span>可自由选择投注模式、倍数，可点击‘×'删除提交注单</p>
<p><span>扩展：</span>可使用jsonp引用官方彩票开奖数据（实时开奖），更多玩法添加请联系我</p>
<p><span>Author:</span>Thompson德芙</p>
<p><span>转载：</span></p>
</div>
<script type="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:'Microsoft yahei';
}
.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:0 auto;
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-repeat center 0;
bottom:0;
}
.close{
background: url(../img/arrow.png) no-repeat center -40px;
bottom:-18px;
}
.explain h2{
text-align:center;
}
.explain p{
margin:5px;
}
.explain p span{
color:#ffff33;
margin-right:10px;
}
#Game{
width:1000px;
height:500px;
margin:50px auto 200px;
}
#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: 0 0 1px currentColor,1px 1px 1px rgba(50,93,164,0.8),2px 2px 3px rgba(50,93,164,0.8),3px 3px 4px rgba(50,93,164,0.8),4px 4px 5px rgba(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: 0 0 1px currentColor, 2px 0 1px #083058, 0 2px 1px rgba(41,76,138,0.8), 2px 1px 1px #083058, 1px 2px 1px #98c0e8, 2px 2px 1px #487098, 3px 1px 1px #083058, 1px 3px 1px rgba(41,76,138,0.8), 3px 2px 1px #083058, 2px 3px 1px rgba(41,76,138,0.8), 3px 3px 1px #487098, 4px 2px 1px #083058, 2px 4px 1px rgba(41,76,138,0.8), 4px 3px 1px #083058, 3px 4px 1px rgba(41,76,138,0.8), 4px 4px 1px #487098, 5px 3px 1px #083058, 3px 5px 1px #98c0e8, 5px 4px 1px #083058, 4px 5px 1px rgba(41,76,138,0.8), 5px 5px 1px #487098, 6px 4px 1px #083058, 4px 6px 1px rgba(41,76,138,0.8), 6px 5px 1px #083058, 5px 6px 1px rgba(41,76,138,0.8), 6px 6px 1px #487098, 7px 5px 1px #083058, 5px 7px 1px #98c0e8, 7px 6px 1px #083058, 6px 7px 1px #98c0e8, 7px 7px 1px #487098, 8px 6px 1px #083058, 6px 8px 1px #98c0e8, 8px 7px 1px #083058, 7px 8px 1px #98c0e8, 8px 8px 1px #487098, 9px 7px 1px #083058, 7px 9px 1px #98c0e8, 9px 8px 1px #083058, 8px 9px 1px #98c0e8, 9px 9px 1px #487098, 10px 8px 1px #083058, 8px 10px 1px #98c0e8, 10px 9px 1px #083058, 9px 10px 1px #98c0e8, 10px 10px 1px #487098, 11px 9px 1px #083058, 9px 11px 1px #98c0e8, 11px 10px 1px #083058, 10px 11px 1px #98c0e8, 11px 11px 1px #487098, 11px 11px 1px #666, 11px 12px 1px #666, 10px 12px 1px #666, 9px 12px 1px #666, 8px 11px 1px #666, 7px 10px 1px #666, 6px 9px 1px #666, 5px 8px 1px #666, 4px 7px 1px #666, 3px 6px 1px #666, 2px 5px 1px #666, 1px 4px 1px #666, 0 3px 1px #666, -1px 2px 1px #666, 20px 8px 8px rgba(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: 0 0 1px currentColor,-1px -1px 1px #003,0 -1px 1px #003,1px -1px 1px #003,1px 0 1px #003,1px 1px 1px #003,0 1px 1px #003,-1px 1px 1px #003,-1px 0 1px #003;
}
h1:after {
color: rgba(40,80,120,.1);
text-shadow: 1px -1px 1px rgba(40,80,120,.8),-1px 1px 1px rgba(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:0 5px;
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_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,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,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: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, 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: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,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_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,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,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:'Microsoft yahei';
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: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,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,93,164,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,93,164,1);
}
index.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,{'top':'0px'},'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</br>开奖号码：345，即中后三直选。'],
['在百位、十位、个位任意位置上任意选择1个或1个以上号码。','从百位、十位、个位任意位置上至少选择1个以上号码，所选号码与相同位置上的开奖号码一致，即为中奖。','投注方案：百位 1</br>开奖号码：百位 1，即中定位胆百位。'],
['从百位、十位中的“大、小、单、双”中至少各选一个组成一注。','对百位和十位的“大（56789）小（01234）、单（13579）双（02468）”形态进行购买，所选号码的位置、形态与开奖号码的位置、形态相同，即为中奖。','投注方案：小双</br>开奖号码：百位与十位“小双”，即中前二大小单双。']
];
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<obj.length;i++ )
{
obj[i].index=i;
obj[i].off=true;
obj[i].onclick=function(){
var oSpan=this.parentNode.getElementsByTagName('span');
for (var i=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 (var j=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(){
var oSpan,num;
var controlDiv=this.getClassName(this.oNum,'c_l_n_btn');
for (var i=0;i < controlDiv.length;i++ )
{
controlDiv[i].index=i;
oSpan=this.getClassName(controlDiv[i],'span'+i);
for (var j=0;j < oSpan.length ;j++ )
{
oSpan[j].index=j
oSpan[j].onclick=function(){
num=this.parentNode.index;
Game.Data[Game.step][num].length=0;
var oParent=this.parentNode.parentNode;
var oLi=oParent.getElementsByTagName('li');
for (var z=0;z < oLi.length ;z++ )
{
oLi[z].style.backgroundPosition='-46px -57px';
oLi[z].off = true;
}
if(Game.step != 2){
var siblings=this.parentNode.children;
for (var z=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){
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=(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;
case 4:
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;
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.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(){
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.amountX*2*oInput.value);
},false);
},
'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.innerHTML*999)){
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]+'</span><span>'+amount.innerHTML+'</span><span>'+oInput.value+'</span><span>'+money.innerHTML+'</span><span class="list_close">×</span>';
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=i*0.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_r_r_box');
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><span class="haoma">'+res+'</span>';
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.a*n.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.a*k*n.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 , 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){
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 (a*m+b*m)/m;
},
//减
'accSubtr':function(a,b){
var r1,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
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function move(obj,json,num,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(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实现网络彩票投注效果全部内容，希望文章能够帮你解决原生JS实现网络彩票投注效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】