欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能

先給大家展示下效果圖：

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括嵐山網(wǎng)站建設(shè)、嵐山網(wǎng)站制作、嵐山網(wǎng)頁制作以及嵐山網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，嵐山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到嵐山省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能

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" >
         <p>8金轉(zhuǎn)</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" >
         <p>128金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
       <div class="getLuck" @click="startLottery">
        <p>立即<br>抽獎(jiǎng)</p>
       </div>
        <div :class="index === 3 ? 'active': ''">
        <div class="wrapper">
         <img src="../../assets/luck-icon.png" >
         <p>128金轉(zhuǎn)</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" >
         <p>256金轉(zhuǎn)</p>
        </div>
        <div class="mask"></div>
       </div>
      </li>
     </ul>
    </div>

    <p class="share">分享領(lǐng)積分 <i class="icon-go"></i></p>

    <div class="rule">
     <p class="rule-title">活動(dòng)規(guī)則</p>
     <ul class="rule-main">
      <li>1、活動(dòng)時(shí)間：2017年9月8日起；</li>
      <li>2、活動(dòng)期間，股事匯用戶每次抽獎(jiǎng)消耗20積分，抽獎(jiǎng)次數(shù)不限</li>
      <li>3、金鉆可用于向投顧提問、送禮、贊賞；</li>
      <li>4、積分賺取：每日簽到、分享文章/問答/直播間、點(diǎn)贊、金鉆充值均可獲得積分哦</li>
      <li>5、活動(dòng)最終解釋權(quán)歸股事匯所有。</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: '積分轉(zhuǎn)盤',
   index: -1,  // 當(dāng)前轉(zhuǎn)動(dòng)到哪個(gè)位置，起點(diǎn)位置
   count: 8,  // 總共有多少個(gè)位置
   timer: 0,  // 每次轉(zhuǎn)動(dòng)定時(shí)器
   speed: 200,  // 初始轉(zhuǎn)動(dòng)速度
   times: 0,  // 轉(zhuǎn)動(dòng)次數(shù)
   cycle: 50,  // 轉(zhuǎn)動(dòng)基本次數(shù)：即至少需要轉(zhuǎn)動(dòng)多少次再進(jìn)入抽獎(jiǎng)環(huán)節(jié)
   prize: -1,  // 中獎(jiǎng)位置
   click: true,
   showToast: false,
   toastType: 'luck',
  }
 },

 props: {

 },


 methods: {
  // 開始抽獎(jiǎng)
  startLottery () {
   if (!this.click) {
    return
   }
   this.closeToast()
   this.speed = 200
   this.click = false
   this.startRoll()
  },

  // 開始轉(zhuǎn)動(dòng)
  startRoll () {
   this.times += 1 // 轉(zhuǎn)動(dòng)次數(shù)
   this.oneRoll() // 轉(zhuǎn)動(dòng)過程調(diào)用的每一次轉(zhuǎn)動(dòng)方法，這里是第一次調(diào)用初始化

   // 如果當(dāng)前轉(zhuǎn)動(dòng)次數(shù)達(dá)到要求 && 目前轉(zhuǎn)到的位置是中獎(jiǎng)位置
   if (this.times > this.cycle + 10 && this.prize === this.index) {
    clearTimeout(this.timer)  // 清除轉(zhuǎn)動(dòng)定時(shí)器，停止轉(zhuǎn)動(dòng)
    this.prize = -1
    this.times = 0
    this.click = true
    this.showToast = true
    this.toastType = 'comeOn'
    console.log('你已經(jīng)中獎(jiǎng)了')
   } else {
    if (this.times < this.cycle) {
     this.speed -= 10  // 加快轉(zhuǎn)動(dòng)速度
    } else if (this.times === this.cycle) {  // 隨機(jī)獲得一個(gè)中獎(jiǎng)位置
     const index = parseInt(Math.random() * 10, 0) || 0
     this.prize = index
     if (this.prize > 7) {
      this.prize = 7
     }
     console.log(`中獎(jiǎng)位置${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)
   }
  },

  // 每一次轉(zhuǎn)動(dòng)
  oneRoll () {
   let index = this.index // 當(dāng)前轉(zhuǎn)動(dòng)到哪個(gè)位置
   const count = this.count // 總共有多少個(gè)位置
   index += 1
   if (index > count - 1) {
    index = 0
   }
   this.index = index
  },

  // 關(guān)閉彈出框
  closeToast () {
   this.showToast = false
  },
 },

 beforeMount () {

 },

 created () {

 },

 beforeDestroy () {

 },
}

總結(jié)

以上所述是小編給大家介紹的基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
網(wǎng)址分享：http://www.chinadenli.net/article10/gidcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站策劃、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站