jslottery

实现效果

example

react normal

Usage

npm 安装

$ npm install jslottery

示例

HTML

<div class="machine">
    <table class="machine-table">
          <tbody>
          <tr>
           <td class="prize-cell" data-id="1" ></td>
           <td class="prize-cell" data-id="2" ></td>
           <td class="prize-cell" data-id="3" ></td>
           <td class="prize-cell" data-id="4" ></td>
          </tr>
          <tr>
           <td class="prize-cell" data-id="12" ></td>	        			        	
           <td class="machine-control-cell" colspan="2" rowspan="2">
           <div class="machine-control" onclick="ClickMe(event)">
           <span>抽奖</span>
           </div>
           </td>	        			 	        			
           <td class="prize-cell" data-id="5" ></td>      			
           </tr>
          <tr>
           <td class="prize-cell" data-id="11" ></td>
           <td class="prize-cell" data-id="6" ></td>
          </tr>
          <tr>
           <td class="prize-cell" data-id="10"></td>
           <td class="prize-cell" data-id="9" ></td>
           <td class="prize-cell" data-id="8" ></td>
           <td class="prize-cell" data-id="7" ></td>
          </tr>
          </tbody>
    </table>
</div>

CSS

.machine{
    margin: 0px auto;
    width:280px;
}
.prize-cell{
    background-color: #cb1573;
    width: 64px;
    height: 66px;
    position: relative;
}
.prize-cell.active{
    background-color: #ffff7e;
}
.prize-cell::after{
    background:rgba(0,0,0,0.2) none repeat scroll 0% 0%;
    content: "";
    bottom: 0px;
    left: 0;
    right: 0;
    height: 5px;
    position: absolute;
}
.machine-control-cell{			
    background-color: #278EF2;
}
.machine-control{
    width: 92px;
    height: 96px;
    position: absolute;
    margin: -44px 0px 0px 20px;
    border-radius: 42%;
    border: 1px solid #ff0;
    cursor: pointer;
}
.machine-control span{
    font-size: 30px;
    float: left;
    margin: 28px 0px 0px 16px;
}

JavaScript

'use strict'
 
let Jslottery = require('jslottery')
 
 
var lottery = Jslottery({
        scrollDom:'prize-cell',
        scrollId:'data-id',		
        startPosition:1,
        callback:function(type,data){
            if(type==1){
                //开始滚动
                console.log("开始")
            }
 
            if(type==2){
                //滚动完成
                console.log("结束")
            }
 
            if(type==0){
                //出现错误
                console.log("错误")
            }
 
            if(type==3){
                //滚动每一个格子
                console.log(data)
            }
        }
    });
 
function ClickMe(){
    lottery.options.stopPosition=Math.floor(Math.random()*1+11);		
    lottery.options.speed=Math.floor(Math.random()*200+300);
    lottery.options.speedUpPosition=Math.floor(Math.random()*6+1);
    lottery.options.speedDownPosition=Math.floor(Math.random()*6+1);
    lottery.options.speedUp=Math.floor(Math.random()*30+20);
    lottery.options.speedDown=Math.floor(Math.random()*100+600);
    lottery.options.totalCircle=Math.floor(Math.random()*2+5);
    lottery.start();
}
 

参数说明

let domNumber,                      //dom个数
    Lottery,                        //全局的Lottery对象                     
    LotteryTimeout = false,         //当前滚动定时器
    LotteryCircle = 0,              //当前滚动圈数
    LotteryCircleStep = 0,          //当前滚动总步数
    LotteryFinish = false,          //判断是否滚动完成
    LotteryInitSpeed = null,        //记录正常的滚动速度
    LotteryError = false,           //错误标识
    LotteryStarted = false;         //开始滚动
 
var options = {
        scrollDom:null,                         //滚动显示的dom  这里是使用class名称
        startPosition:1,                        //开始位置
        stopPosition:2,                         //停止位置
        totalCircle:2,                          //滚动的圈数
        speed:400,                              //正常速度  （这里的速度就是定时器的时间间隔，间隔越短，速度越快）
        speedUp:100,                            //加速的时候速度
        speedDown:600,                          //减速的时候速度
        speedUpPosition:3,                      //加速点 （这里会和滚动的总步数进行比较 理论上总步数 = 总长度 * 总圈数 + stopPosition - startPosition +1 ）
        speedDownPosition:5,                    //减速点
        scrollId:null,                          //滚动的dom上的属性号，是用来标记滚动结束获得的id号对应的奖项
        callback:function(type){}               /**
                                                 *	滚动回调函数   
                                                 *	回调类型		 
                                                 					type==1 : 开始滚动 
                                                                 	type==2 : 停止滚动
                                                                	type==0 : 出现错误
                                                                	type==3 : 滚动每个格子的回调
                                                 *	回调内容      	
                                                 					data = {} 
                                                 */
                                                
    };

如何开发编译源码

jslottery的是通过webpack进行打包的

example是使用parcel进行构建的

#克隆 
git clone https://github.com/Topthinking/Jslottery.git
 
#依赖 
cd Jslottery
npm install
 
#测试用例 
cd example/normal
npm run dev

打开浏览器访问 localhost:3000