前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >九宫格抽奖转盘

九宫格抽奖转盘

作者头像
honey缘木鱼
发布2019-12-11 10:10:01
2.4K0
发布2019-12-11 10:10:01
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试

一.效果图如下

实现图

二.技术点实现

  1. 布局实现 用到了table布局
代码语言:javascript
复制
<!--效果html开始-->
<div id="header">
    <div id="frirst1" ></div>
    <div id="frirst2" ></div>
</div>
<div id="contain">
<div id="used"></div>
  <div id="lottery">
    <table border="0" cellpadding="0" cellspacing="8">
        <tr>
            <td class="lottery-unit lottery-unit-0">
                <img src="images/hongbao@2x.png">
                <div class="money-0"></div><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-1"><img src="images/yuanbao@2x.png"><div class="money-1"></div><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-2"><img src="images/hongbao@2x.png"><div class="money-2"></div><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-7"><img src="images/qianbao03@2x.png"><div class="money-7"></div><div class="mask"></div></td>
            <td>
<!--                <a href="#"></a>-->
                <div id="btnClick"></div>
            </td>
            <td class="lottery-unit lottery-unit-3"><img src="images/qianbao02@2x.png"><div class="money-3"></div><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-6"><img src="images/hongbao@2x.png"><div class="money-6"></div><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-5"><img src="images/jinbi@2x.png"><div class="money-5"></div><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-4"><img src="images/hongbao@2x.png"><div class="money-4"></div><div class="mask"></div></td>
        </tr>
    </table>
   </div>
</div>
  1. 转盘转动方法
代码语言:javascript
复制
    function roll(){
        lottery.times += 1;
       lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index+1) {
            clearTimeout(lottery.timer);
            lottery.prize=-1;
            lottery.times=0;
             lottery.stop();
            // alert('恭喜您!获得'+getPrizerUser.amount+"元");
            click=false;
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {
                 lottery.prize = getPrizerUser.sort;
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);//循环调用
        }
        return false;
    }

3.将此抽奖网址集成在APP上 因为我们的需求是转盘抽奖用h5写,然后将此网址用APP加载,APP在加载时传入Token,后台在抽奖接口中判断此人积分是否可用抽奖,将抽奖结果回调给APP做弹框提示!

APP展示抽奖结果

三.说明 此抽奖参考文章:https://www.cnblogs.com/starof/p/4933907.html,因为用JQuery写的,本人知识匮乏,只能在此基础上修改成自己需要的。

具体请参考Demo
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 具体请参考Demo
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档