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
---------------------------------------------------------------我是分割线--------------------------------------------------------------------------------
小弟不才，各位仁兄如有更好的方法欢迎留言斧正。。。
