基于VUE实现的九宫格抽奖功能


Posted in Javascript onSeptember 30, 2018

先给大家展示下效果图:

基于VUE实现的九宫格抽奖功能基于VUE实现的九宫格抽奖功能

HTML代码:

<template>
 <div class="luckDraw">
  <title-bar :title="title"></title-bar>
  <div class="container">
   <div class="turntable-wrapper">
    <div class="luck-wrapper">
     <p class="integral">我的积分: <span>1000</span></p>
     <ul class="nineGrid">
      <li class="row">
       <div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>8金转</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
      <li class="row">
       <div :class="index === 7 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>128金转</p>
        </div>
        <div class="mask"></div>
       </div>
       <div class="getLuck" @click="startLottery">
        <p>立即<br>抽奖</p>
       </div>
        <div :class="index === 3 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>128金转</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
      <li class="row">
       <div v-for="(n, key) in 3" :key="n" :class="index === 6-key ? `active` : ``">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" alt="">
         <p>256金转</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
     </ul>
    </div>

    <p class="share">分享领积分 <i class="icon-go"></i></p>

    <div class="rule">
     <p class="rule-title">活动规则</p>
     <ul class="rule-main">
      <li>1、活动时间:2017年9月8日起;</li>
      <li>2、活动期间,股事汇用户每次抽奖消耗20积分,抽奖次数不限</li>
      <li>3、金钻可用于向投顾提问、送礼、赞赏;</li>
      <li>4、积分赚取:每日签到、分享文章/问答/直播间、点赞、金钻充值均可获得积分哦</li>
      <li>5、活动最终解释权归股事汇所有。</li>
     </ul>
    </div>

    <div></div>
   </div>

   <LuckToast :showToast="showToast" :toastType="toastType" @closeToast="closeToast" @startLottery="startLottery"></LuckToast>
  </div>
 </div>
</template>

SCSS样式:

@import "~base";

.luckDraw {

 .turntable-wrapper {
  padding: 0 px3rem(38);
  position: relative;
  @include background-cover("background-luck.png");
  padding-top: px3rem(121);

  .luck-wrapper {
   width: px3rem(300);
   height: px3rem(377);
   margin: 0 auto;
   position: relative;
   @include background-cover("background-turntable.png");

   .integral {
    width: 100%;
    color: #6d2d00;
    font-size: px3rem(16);
    font-weight: normal;
    text-align: center;
    position: absolute;
    top: px3rem(58);

    span {
     font-weight: 600;
     color: #ff2f4d;
    }
   }

   .nineGrid {
    position: absolute;
    top: px3rem(86);
    left: 50%;
    margin-left: px3rem(-130);
    width: px3rem(260);
    height: px3rem(260);

    li {
     height: px3rem(80);
     display: flex;
     margin-top: px3rem(5);

     > div {
      flex: 1;
      margin-right: px3rem(5);
      height: 100%;
      text-align: center;
      position: relative;

      .wrapper {
       width: 100%;
       height: 100%;
       margin: 0;
       @include background-cover("background-grid.png");
      }

      img {
       width: px3rem(46);
       height: px3rem(38);
       vertical-align: middle;
       margin-top: px3rem(8);
      }

      .mask {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0.5;
       border-radius: px3rem(10);
       background-color: #000;
       display: none;
      }
     }

     > div.active {
      .mask {
       display: block;
      }
     }

     > div:first-child {
      margin-left: px3rem(5);
     }

     > div.getLuck {
      @include background-cover("background-getLuck.png");
      font-size: 0;

      p {
       font-size: px3rem(20);
       font-weight: 600;
       color: #fff;
       line-height: 1.1;
       margin-top: px3rem(11);
      }
     }
    }

    li:last-child {
     margin-bottom: px3rem(5);
    }
   }
  }

  .share {
   width: px3rem(160);
   height: px3rem(42);
   margin: 0 auto;
   text-align: center;
   line-height:px3rem(42);
   @include background-cover("luckShrae.png");
   margin-top: px3rem(22);
   color: #6d2d00;
   font-size: px3rem(16);
   font-weight: 600;

   .icon-go {
    @include size(30);
    @include background-cover("goShare-icon.png");

    display: inline-block;
    vertical-align: middle;
    margin-bottom: px3rem(2);
   }
  }

  .rule {
   margin-top: px3rem(14);
   color: #fff;
   font-size: px3rem(14);
   padding-bottom: px3rem(39);

   .rule-title {
    text-align: center;
    position: relative;
    font-size: px3rem(16);
    margin-bottom: px3rem(14);
   }

   .rule-title:before,
   .rule-title:after {
    content: '';
    position: absolute;
    top: 52%;
    background: #fff;
    width: 30%;
    height: px3rem(1);
   }

   .rule-title:before {
    left: 0;
   }

   .rule-title:after {
    right: 0;
   }
  }
 }
}

JS代码:

// import Utils from 'utils'
import TitleBar from 'components/TitleBar.vue'
import LuckToast from 'components/luckToast.vue'

export default {
 name: 'luckDraw',

 components: {
  TitleBar,
  LuckToast,
 },

 data () {
  return {
   title: '积分转盘',
   index: -1,  // 当前转动到哪个位置,起点位置
   count: 8,  // 总共有多少个位置
   timer: 0,  // 每次转动定时器
   speed: 200,  // 初始转动速度
   times: 0,  // 转动次数
   cycle: 50,  // 转动基本次数:即至少需要转动多少次再进入抽奖环节
   prize: -1,  // 中奖位置
   click: true,
   showToast: false,
   toastType: 'luck',
  }
 },

 props: {

 },


 methods: {
  // 开始抽奖
  startLottery () {
   if (!this.click) {
    return
   }
   this.closeToast()
   this.speed = 200
   this.click = false
   this.startRoll()
  },

  // 开始转动
  startRoll () {
   this.times += 1 // 转动次数
   this.oneRoll() // 转动过程调用的每一次转动方法,这里是第一次调用初始化

   // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
   if (this.times > this.cycle + 10 && this.prize === this.index) {
    clearTimeout(this.timer)  // 清除转动定时器,停止转动
    this.prize = -1
    this.times = 0
    this.click = true
    this.showToast = true
    this.toastType = 'comeOn'
    console.log('你已经中奖了')
   } else {
    if (this.times < this.cycle) {
     this.speed -= 10  // 加快转动速度
    } else if (this.times === this.cycle) {  // 随机获得一个中奖位置
     const index = parseInt(Math.random() * 10, 0) || 0
     this.prize = index
     if (this.prize > 7) {
      this.prize = 7
     }
     console.log(`中奖位置${this.prize}`)
    } else if (this.times > this.cycle + 10 &&
     ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
     this.speed += 110
    } else {
     this.speed += 20
    }

    if (this.speed < 40) {
     this.speed = 40
    }
    this.timer = setTimeout(this.startRoll, this.speed)
   }
  },

  // 每一次转动
  oneRoll () {
   let index = this.index // 当前转动到哪个位置
   const count = this.count // 总共有多少个位置
   index += 1
   if (index > count - 1) {
    index = 0
   }
   this.index = index
  },

  // 关闭弹出框
  closeToast () {
   this.showToast = false
  },
 },

 beforeMount () {

 },

 created () {

 },

 beforeDestroy () {

 },
}

总结

以上所述是小编给大家介绍的基于VUE实现的九宫格抽奖功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的deferred对象使用详解
Aug 20 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
手写实现JS中的new
Nov 07 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 #Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 #Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python快速排序算法实例分析
2017/11/29 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python操作yaml说明
2020/04/08 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
《一株紫丁香》教学反思
2014/02/19 职场文书
读书活动实施方案
2014/03/10 职场文书
通信工程求职信
2014/07/16 职场文书
高老头读书笔记
2015/06/30 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL