首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 25, 2016

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

主要功能：

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实现网络彩票投注效果

- Author -

thomspon

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
Dec 19 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
JavaScript实现url参数转成json形式
Sep 25 #Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 #Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 #Javascript
需要牢记的JavaScript基础知识
Sep 25 #Javascript
分享一个原生的JavaScript拖动方法
Sep 25 #Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 #Javascript
jQuery的deferred对象使用详解
Sep 25 #Javascript
Odoo(1) 批处理(1) 黑名单(1) NFS(1) Logrotate(1) T-SQL(1) SeaTunnel(1) tkFileDialog(1) ftpserver(1) 重复数据(2)
You might like
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP 微信支付类 demo
2015/11/30 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php post换行的方法
2020/02/03 PHP
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Three.js学习之网格
2016/08/10 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python读写二进制文件的方法
2015/05/09 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
C/C++程序员常见面试题一
2012/12/08 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
学生打架检讨书1000字
2014/01/16 职场文书
大学新生军训感言
2014/02/25 职场文书
高考标语大全
2014/06/05 职场文书