Js写九宫格抽奖

国庆出去转了一圈，回来及时把以前写的一些有用的在这儿记录一下

--------------------------------------------我是分割线------------------------------------------------------------

先说说JQuery封装的专门用来处理九宫格抽奖的框架JQuery.latest.min.js，文件地址如下

https://files.cnblogs.com/files/teersky/JQuery.latest.min.js

　　用这个框架问题就很简单了，网上例子很多我就不做赘述，给大家发一个地址以供参考

http://www.cnblogs.com/starof/p/4933907.html

　　我要说的是用原生的思想写一个九宫格抽奖，效果图如下

注： 图片是随便放的，爬自豆瓣音乐

先放HTML代码

<div id="container">
	<ul id="oUl">
		<li><img src="images/1.jpg"/><div class="mask"></div></li>
		<li><img src="images/2.jpg"/><div class="mask"></div></li>
		<li><img src="images/3.png"/><div class="mask"></div></li>
		<li><img src="images/4.jpg"/><div class="mask"></div></li>
		<a>开始</a>
		<li><img src="images/5.jpg"/><div class="mask"></div></li>
		<li><img src="images/6.jpg"/><div class="mask"></div></li>
		<li><img src="images/7.jpg"/><div class="mask"></div></li>
		<li><img src="images/8.jpg"/><div class="mask"></div></li>
	</ul>
	<div id="page"></div>
</div>

　　img标签是放图片的地方，而mask是放当标签滚动起来是标记的地方，

　　a标签是开始按钮

　　div.page是放获奖信息展示的地方　　

CSS代码如下：

* {
                margin: 0;
                padding: 0;
            }
            #container {
                width: 310px;
                height: 310px;
                margin: 30px auto;
            }
            
            #oUl {
                width: 310px;
                height: 310px;
                list-style: none;
            }
            #oUl li,
            #oUl a {
                width: 100px;
                height: 100px;
                border: 1px solid #565656;
                float: left;
                text-align: center;
                line-height: 100px;
                position: relative;
            }
            #oUl li img{
                display: block;
                width: 100%;
                height: 100%;
            }
            #oUl li .mask{
                width: 100%;
                height: 100%;
                position: absolute;
                left:0;
                top:0;
                background: url(images/mask.png) no-repeat;
                background-size: cover;
                display: none;
            }
            #oUl a:hover {
                cursor: pointer;
                color: orange;
                font-size: 18px;
            }
            #oUl .active .mask{
                display: block;
            }
            #page {
                line-height: 32px;
                color: #9a9a9a;
                text-align: center;
                position:absolute;
                left: 50%;
                top: 50px;
                width: 300px;
                height: 50px;
                margin-left: -150px;
                display: none;
                background: #000;
                color: #fff;
            }

下面就是最好玩的Js部分了，

var container = document.getElementById('container'),
      li = container.getElementsByTagName('li'),
      aa = container.getElementsByTagName('a')[0],
      page = document.getElementById('page'),
      timer = null;
      bReady = false;
			
var order = [0,1,2,4,7,6,5,3];   //这个是放标签滚动次序的地方


//随机函数，用于在九宫格跑起来之前就得到要随机到的地方
function random(n, m) {
	return parseInt((m - n) * Math.random() + n);
}

　　

function start(num,str) {
	var i = 0;  //此处定义一个i执行效果类似于for循环，不过for循环执行太快，所以不能用
	var t =60;  //标记转动速度，也就是每过60毫秒标记重新改变一次
	var round = 10; //表示标记转动的圈数
	var rNum = round*8;   //表示标记转动的次数
				
	timer = setTimeout(setFreq, t);
	function setFreq() {
　　　　　　　 //首先标记每次刷新就让li所有的class都为空
	    for(var j = 0; j < li.length; j++) {
		li[j].className = '';
	    }
            //通过i余8得到此刻在order数组中的数字
	    var ord = order[i%li.length];
            //该数字就是标记应该出现的位置（我不知道JQuery框架是不是这样处理的）
	    li[ord].className = "active";
	    i++;  //i自增
	    if(i<rNum-8){
　　　　　　　　　 //当i的数量小于转rNum-8次的数量，t不变
	        timer = setTimeout(setFreq, t);
	    }else if(i>= rNum-8 && i< rNum+num){
                //否则让t每次增加li标签位置序列乘以5，此时计时器运行速度会降低，同时标签刷新速度也会降低
	        t+=(i-rNum+8)*5;
		timer = setTimeout(setFreq, t);
	    }
	    if( i >= rNum+num){
　　　　　　　　　 //当i大于转rNum加随机出来的数字次计时器结束，出现信息提示框提示中奖信息
		page.innerHTML="恭喜你中了" + num + str +"" ;
		var timer2 = null;
		timer2 = setTimeout(function(){
			page.style.display="block";
			clearTimeout(timer2);
		},1000);
		bReady = false;    //当计时器结束后让a标签变为可点击状态
		clearTimeout(timer);
	    }
					
	}
}

　　当a标签点击后执行代码如下

var num = 0;    //先定义一个num用来存放得到的随机函数，也可以用来存放后台传来的随机数，前台写这种代码安全性不高
aa.onclick = function() {
	/*'1-8'*/
	if(bReady) return false;  //当bReady为true时a标签为不可点状态
	page.style.display="none"; //这个是处理再次点击时让page框消失的代码
	bReady = true;   //当点击之后就让bReady为false，即a不可点状态
	num = random(1,9)   //随机得到一个数字
	start(num,"000万现金大礼包");  //执行函数start，num为上面的随机数，后面的字符串为在page信息框中展示的信息，可以随便更改
}
			

　　完整项目地址如下，有兴趣的朋友可以瞅瞅

https://files.cnblogs.com/files/teersky/%E5%8E%9F%E7%94%9F%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%8A%BD%E5%A5%96.rar

---------------------------------------------------------------我是分割线--------------------------------------------------------------------------------

小弟不才，各位仁兄如有更好的方法欢迎留言斧正。。。

 

转载于:https://www.cnblogs.com/teersky/p/7639709.html