iTakeo

双色球投注js详解…

最近项目做了一个双色球投注的效果，双色球的规则，从1-33选六个不重复数字为红球，1-16选一个为蓝球，组成一个6+1就为一注，下面就是一个实例，大家可以点击看看…

  • 01
  • 01
  • 01
  • 01
  • 01
  • 01
  • 10

    • 换一注

下面是代码解释，首先要取到红球和篮球的数字，肯定要获取随机数，写一个Random方法，传入开始数字，和结束数字，然后通过Math.random来获取随机数…

  1. //获取随机数  
  2. function Random(start,end){  
  3.     return Math.round(Math.random()*(end-start)+start);  
  4. };  

咋们随机数已经可以获取，接下来就是要写一个获取数组的方法，把上面的随机数写进一个数组。用来保存红球和篮球的号码。

  1. //获得数组，list为数组的长度，也就是球的个数，start是开始的数字，end是结束的数字  
  2. function getNums(list,start,end){  
  3.     var temp = [];    //定义一个空数组  
  4.     while(temp.length<list){  
  5.         var randomNum = Random(start,end);  //获取随机数  
  6.         if(!isIn(randomNum,temp)){         //isIn是判断是否重复  
  7.             temp.push(randomNum);    //添加进数组  
  8.         };  
  9.     };  
  10.     return temp;   //最后返回这个数组  
  11. };  

大家看到上面有个isIN，这是判断这个随机数在不在目前这个数组里面，因为双色球是不容许出现重复数字的，具体代码如下：

  1. //判断是否重复，num是当前数字，arr是要比对的数组  
  2. function isIn(num,arr){  
  3.     //对这个arr数组循环，如果出现num则返回true，如果for走完了，没有遇到重复项，则返回false  
  4.     for(var i=0;i<arr.length;i++){  
  5.         if(arr[i] == num){  
  6.             return true;  
  7.         };  
  8.     };  
  9.     return false;  
  10. };  

再来做一个小优化，为不足两位数的号码补足两位数：

  1. //补零  
  2. function toTwo(num){  
  3.     if(num<10){  
  4.         return ‘0’+num  
  5.     }else{  
  6.         return ”+num  
  7.     };  
  8. };  

这个时候，红色和篮球的获取方法已经全部写完了，接下来就是最后一步了，就要把号码逐个写入到html中：

  1. //初始化数据  
  2. function init(){  
  3.     var red = getNums(6,1,33); //红球号码  
  4.     var blue = getNums(1,1,16);//蓝球号码  
  5.     var _ul = document.getElementById(‘con’);  
  6.     var _li = _ul.getElementsByTagName(‘li’);  
  7.     for(var i=0;i<_li.length;i++){  
  8.         if(i<_li.length-1){  
  9.             _li[i].innerHTML = toTwo(red[i]); //为前6个li填入红球号码  
  10.         }else{  
  11.             _li[_li.length-1].innerHTML = toTwo(blue[0]);  //最后一个填入篮球号码  
  12.         }  
  13.         rotate(_li[i],i);  //这是给小球添加旋转的效果  
  14.     };  
  15. };  

下面是小球旋转函数，obj为当前的li，i为旋转的圈数，假使每次小球旋转为30度，转满一圈就是360/30需要旋转12次，第一个球转12*(i+1)次后，刚好1圈，第二个球12*(i+1)就是24，需要转2圈，一次类推，最后一个球需要转6次。

  1. //小球旋转  
  2. function rotate(obj,i){  
  3.     var a = 1;  
  4.     var timer = setInterval(function(){  
  5.         a++;  
  6.         if(a>12*(i+1)){  
  7.             clearInterval(timer);  
  8.         }else{  
  9.             obj.style.transform = obj.style.MozTransform = obj.style.WebkitTransform = “rotate(“+a*30+“deg)”;  
  10.         };  
  11.     },13);  
  12. }  

到这里，双色球就已经全部写完了，那个点击换一注，只需要把init重新走一遍就可以了：

  1. var change = document.getElementById(‘change’);  //换一注按钮  
  2. change.onclick = function(){  
  3.     init();     //重新执行  
  4. };  

接下来我们做一个小改动，不想要旋转效果，想要数字一直随机跳动，一定时间后自动停止，具体看下面的代码和demo：

  • 01
  • 01
  • 01
  • 01
  • 01
  • 01
  • 10

    • 换一注

  1. //不旋转  
  2. function init(){  
  3.     var _ul = document.getElementById(‘ccon1’);  
  4.     var _li = _ul.getElementsByTagName(‘li’);  
  5.     //设置一个定时器，每50秒换一次号码  
  6.     var time = setInterval(function(){  
  7.         var red = getNums(6,1,33);  
  8.         var blue = getNums(1,1,16);  
  9.         for(var i=0;i<_li.length-1;i++){  
  10.             _li[i].innerHTML = toTwo(red[i]);  
  11.         };  
  12.             _li[_li.length-1].innerHTML = toTwo(blue[0]);  
  13.     },50)  
  14.     //800毫秒之后，停止切换  
  15.     setTimeout(function(){  
  16.         clearInterval(time);  
  17.     },800)  
  18. };  

下载：演示文件

2015/07/07 0 /
未分类
/
标签:  暂无标签

验证码： 7 + 1 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部