国庆出去转了一圈，回来及时把以前写的一些有用的在这儿记录一下
--------------------------------------------我是分割线------------------------------------------------------------
先说说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="data:images/1.jpg"/><div class="mask"></div></li>
<li><img src="data:images/2.jpg"/><div class="mask"></div></li>
<li><img src="data:images/3.png"/><div class="mask"></div></li>
<li><img src="data:images/4.jpg"/><div class="mask"></div></li>
<a>开始</a>
<li><img src="data:images/5.jpg"/><div class="mask"></div></li>
<li><img src="data:images/6.jpg"/><div class="mask"></div></li>
<li><img src="data:images/7.jpg"/><div class="mask"></div></li>
<li><img src="data:images/8.jpg"/><div class="mask"></div></li>
</ul>
<div id="page"></div>
</div>
img标签是放图片的地方，而mask是放当标签滚动起来是标记的地方，
a标签是开始按钮
div.page是放获奖信息展示的地方
CSS代码如下：
* {
margin: ;
padding: ;
}
#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 #;
float: left;
text-align: center;
line-height: 100px;
position: relative;
}
#oUl li img{
display: block;
width: %;
height: %;
}
#oUl li .mask{
width: %;
height: %;
position: absolute;
left:;
top:;
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: %;
top: 50px;
width: 300px;
height: 50px;
margin-left: -150px;
display: none;
background: #;
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
---------------------------------------------------------------我是分割线--------------------------------------------------------------------------------
小弟不才，各位仁兄如有更好的方法欢迎留言斧正。。。