个人游戏之作，小伙伴们研究下就好
主要功能：
1、可自由选择投注模式、倍数，可点击‘×'删除提交注单。
2、可使用jsonp引用官方彩票开奖数据（实时开奖）。
3、结合后台可实现官彩同样的效果。
实现原理：
单纯使用Js实现，这里主要用数组存放数据，随机生成开奖号码，然后进行判断是否中奖。
下面是完整JS代码：
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta content=""> <title>彩票--德芙</title> <link type='text/css' href="https://www.jb51.net/css/index.css" /> <script type="text/javascript" src='https://www.jb51.net/js/sports-1.0-js.js'></script> </head> <body> <div> <div> <div> <h1>TanZhouCaiPiao</h1> <p>付出不亚于任何人的努力！</p> </div> <div> <p>潭州彩票<span></span>期</p> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div> <div>德芙纵享丝滑</div> <div> ￥ <span>1314.51</span> </div> <div> </div> <div> </div> </div> </div> <div> <div> <div> <span>三星</span> <span>定位胆</span> <span>大小单双</span> </div> <div> <div> <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> </div> <div> <div> <span></span> <input type="text" value='1'/> <span></span> <i>倍</i> <select> <option value="1">元</option> <option value="2">角</option> <option value="3">分</option> </select> <p>奖金：<span>1800</span></p> <p>选择<span>0</span>注，共 ￥ <span>0</span>元</p> </div> <div> <input type="submit" value='添加号码'/> </div> <input type="button" value='提交注单'/> </div> <textarea readonly></textarea> </div> <div> <div> <div>开奖期号</div> <div>开奖号码</div> <ul> </ul> </table> </div> <div> <div> <span>玩法</span> <span>注数</span> <span>倍数</span> <span>金额</span> <span></span> </div> <ul> </ul> </div> <div> <input type="button" value='立即投注'/> </div> </div> </div> </div> <div> <h2>介绍说明</h2> <div></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='https://www.jb51.net/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