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

2024-10-07 18:44:35

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

主要功能：

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来生成随机彩票号码清单

朋友说他的朋友喊问的问题.彩票店,想打印一个清单出来. 有编号1-22的22个球,从里面随机拿5个出来.拿出来后不放回去. 例如我第一次拿出来是号码5,第二次就是从剩下的21个球里面拿.依此类推,一共拿5个球出来. 拿出来最后5个球,排列的顺序不管,就是说拿出来是1 2 3 4 5和 5 4 3 2 1 的这样算是一样的号码,打印出来清单只能出来一次最后把所有的结果打印出来.他所谓的简单的排列组合的问题,涉及到数组的一些操作,我暂时脑子昏没法思考. 看有没有大大可以解答了,提供一些比较方便的算
JavaScript生成福利彩票双色球号码

福利彩票的双色球号码是由6个红球号码和1个篮球号码组成的,其中,6个红球号码是从01到33中随机抽出的6个数字,1个篮球号码是从01到16中随机抽出的1个数字.6个红球号码通常按照从小到大的顺序排列.下面是JavaScript中生成一注双色球号码的方法,供大家参考! var redBall = new Array(); var redLen = redBall.length; while(redLen<6){ var ball = ranNumber(1,33); var flag = true
基于javascript实现彩票随机数生成（简单版）

本文实例讲解了JavaScript 实现彩票中随机数组的获取详细代码,分享给大家供大家参考,具体内容如下效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math.random方法彩票随机数的生成</title> </head> <body> <!--
基于javascript实现彩票随机数生成（升级版）

本文实例讲解了JavaScript 实现彩票中随机数组的获取详细代码,分享给大家供大家参考,具体内容如下效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math.random方法彩票随机数的生成-升级版</title> <style type="text/css&q
原生JS实现网络彩票投注效果

个人游戏之作,小伙伴们研究下就好主要功能: 1.可自由选择投注模式.倍数,可点击'×'删除提交注单. 2.可使用jsonp引用官方彩票开奖数据(实时开奖). 3.结合后台可实现官彩同样的效果. 实现原理: 单纯使用Js实现,这里主要用数组存放数据,随机生成开奖号码,然后进行判断是否中奖. 下面是完整JS代码: index.html <!doctype html> <html lang="en"> <head> <meta charset=&q
原生JS实现轮播效果+学前端的感受(防止走火入魔)

插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么
原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
原生js实现波浪导航效果

本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下展示效果: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js波浪导航</title> <style> * {undefined margin:0; padding:0; font-family:"微软
原生JS实现简单放大镜效果

本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } img{ vertical-align: top; } .fdj { width: 350px; heig
原生js+canvas实现下雪效果

本文实例为大家分享了js+canvas实现下雪效果的具体代码,供大家参考,具体内容如下效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas下雪效果(原生js)</title> <style> * { margin: 0; padding: 0 } html, body { width: 100%;
原生js编写焦点图效果

自己用原生js写的简单焦点图,算是对原生js初步运用. html部分 <div class="focusPicture"> <section class="mPhoto" id="mPhoto"> <img src="images/20161021/b_5809b93b66d18.jpg"/> </section> <section
原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 CSS样式: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style>
原生JS实现拖拽效果

本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <div id="login" class="login">  <div id="title" class="login-title">登录会
原生js做的手风琴效果的导航菜单

做好的手风琴效果如下,具体看代码: html代码复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

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

相关推荐

随机推荐