原生JS实现网络彩票投注效果
原生JS实现网络彩票投注效果
发布时间:2016-12-30 来源:查字典编辑
摘要:个人游戏之作,小伙伴们研究下就好主要功能:1、可自由选择投注模式、倍数,可点击‘×'删除提交注单。2、可使用jsonp引用官方彩票开奖数据(...

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

主要功能:

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> <div> <h1>TanZhouCaiPiao</h1> <p>付出不亚于任何人的努力!</p> </div> <div> <p>潭州彩票<span id='G_t_k_t_issue'></span>期</p> <div id='G_t_k_num'> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div> <div>德芙纵享丝滑</div> <div> ¥ <span id='G_t_u_money'>1314.51</span> </div> <div id='supMoney'> </div> <div id='addMoney'> </div> </div> </div> <div id="content"> <div> <div id='c_l_mode'> <span>三星</span> <span>定位胆</span> <span>大小单双</span> </div> <div> <div id='c_l_s_right'> <a href="javascript:void(0)">选号规则 <div> </div> </a> <a href="javascript:void(0)">中奖说明 <div> </div> </a> <a href="javascript:void(0)">投注案例 <div> </div> </a> </div> </div> <div id='c_l_number'> </div> <div> <div> <span></span> <input type="text" id='c_l_b_f_beishu' value='1'/> <span></span> <i>倍</i> <select name="sel_mode" id="sel_mode"> <option value="1">元</option> <option value="2">角</option> <option value="3">分</option> </select> <p>奖金:<span id='jiangjin'>1800</span></p> <p>选择<span id='zhushu'>0</span>注,共 ¥ <span id='money'>0</span>元</p> </div> <div> <input type="submit" value='添加号码' id='c_l_b_s_addNum'/> </div> <input type="button" value='提交注单' id='c_l_b_deledNum'/> </div> <textarea id='c_l_data' readonly></textarea> </div> <div> <div> <div>开奖期号</div> <div>开奖号码</div> <ul id='c_r_r_box'> </ul> </table> </div> <div> <div> <span>玩法</span> <span>注数</span> <span>倍数</span> <span>金额</span> <span></span> </div> <ul id='c_r_l_ul'> </ul> </div> <div> <input type="button" value='立即投注' id='c_r_t_btn'/> </div> </div> </div> </div> <div> <h2>介绍说明</h2> <div id='toggleMove'></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>×</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>'+addZero(Game.qishu)+'</span><span>'+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); }

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类