前端开发常见签到抽奖转盘功能

网站开发 ，经常需要用到登录注册，签到抽奖等模块，虽然每次都要写，但是把这个记录下来会很方便下次再用。。。

这边刚写了一个签到抽奖，放到这边来分享记录一下。

首先根据设计图 需要这样的样式与效果

这样的抽奖页面无非就是样式当前类切换的效果， 那基本逻辑就是点击抽奖后，需要做一个跑马灯的效果，并且一开始加速然后减速到出中奖结果， 这边会用到定时器

每切换一下调用定时器，直到出来结果后清除定时器。。。展示中奖

那面贴上代码

// 调用是这样的 

// 声明这个函数 用来传入后台请求获取中奖结果id的
function getId() {
   
    return Math.ceil(Math.random(1,8)*10) + 7; // 线下测试 随机数结果
    // return  '   '  // 这里是如果用户没有权限抽奖 返回的字符串  
};

const lettery = new Lottery(getId);   //创建实例 ，传入获取中奖id的函数，前面还可以传入一个对象，里面是控制抽奖转的最低圈数与速度

//模拟后台奖品数据
const prize = [{
   "id":9,"title":"10个积分","type":1},{
   "id":10,"title":"5元优惠券","type":2}, ....] 共七组奖品

lettery.init(prize); // 初始化 ， 传入奖品数据 prize

上面是如何调用这个功能 ，下面h+c实现样式，但并未做注释，样式可以自己根据需要去写，也是简单的东西，最后是js逻辑代码，有我的理解与注释

// 这边是html 字符串，放在js中，初始化的时候处理并加入页面

let lotteryHtml = `
        <div id="lottery">
        <div class="lottery-box">
            <div class="lottery-head">
                <h1><img src="../images/sign/sign-box.png" width="40" height="40">签到抽奖</h1>
                <div class="prize-close">X</div>
            </div>
            <div class="lottery-content">
                <div class="left-light sider-light">
                    <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                </div>
                <div class="top-light sider-light">
                    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                </div>
                <div class="right-light sider-light">
                    <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                </div>
                <div class="bottom-light sider-light">
                    <i></i><i></i><i></i><i></i><i></i>