您现在的位置是：网站首页>前端技术>VueVue

VUE实现九宫格转盘抽奖

神夜2019-09-30 08:38:57【Vue】5506人已围观文章来源：神夜个人博客

简介VUE实现九宫格转盘抽奖

效果图：

一、html代码 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>VUE实现九宫格抽奖</title>
<link rel="stylesheet" href="css/lottery.css" />
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="lottery-box" id="app">
  <h1 class="title">VUE实现九宫格抽奖</h1>
  <div class="lottery">
    <div class="lottery-item">
      <div class="lottery-start">
        <div class="box gray" v-if="isStart===0">
          <p>活动未开始</p>
        </div>
        <div class="box" @click="startLottery" v-if="isStart===1">
          <p><b>抽奖</b></p>
          <p>消耗{{score}}积分</p>
        </div>
        <div class="box gray" v-if="isStart===2">
          <p>活动已过期</p>
        </div>
      </div>
      <ul>
        <li v-for="(item,i) in list" :class="i==index?'on':''">
          <div class="box">
            <p><img :src="item.img" alt=""></p>
            <p>{{item.title}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="mask" v-if="showToast"></div>
  <div class="lottery-alert" v-if="showToast">
    <h1>恭喜您</h1>
    <p><img src="img/j2.png" alt=""></p>
    <h2>获得{{list[index].title}}</h2>
    <div class="btnsave" @click="showToast=false">确定</div>
  </div>
</div>
<script src="js/lottery.js"></script>
</body>
</html>


二、CSS 



* { margin: 0; padding: 0; box-sizing: border-box }
body { background: radial-gradient(49% 160%, #22b5ff 0, #3a72fa 100%); font-size: 14px }
img { border: 0 }
ul, li { list-style-type: none }
.lottery-box { overflow: hidden }
.lottery-box .title { text-align: center; padding: 50px 0; font-size: 18px; color: #fff }
.lottery { animation: changeBg .5s ease infinite; overflow: hidden; padding: 20px; width: 400px; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100% }
@keyframes changeBg {  0% {
 background-image:url(../img/k1.png)
}
100% {
 background-image:url(../img/k2.png)
}
}
.lottery .lottery-item { height: 340px; position: relative; margin-top: 10px; margin-left: 10px }
.lottery .lottery-item ul li { width: 33.33333333%; position: absolute; padding-right: 10px }
.lottery .lottery-item ul li:nth-child(2) { left: 33.33333333% }
.lottery .lottery-item ul li:nth-child(3) { left: 66.66666666% }
.lottery .lottery-item ul li:nth-child(4) { left: 66.66666666%; top: 110px }
.lottery .lottery-item ul li:nth-child(5) { left: 66.66666666%; top: 220px }
.lottery .lottery-item ul li:nth-child(6) { left: 33.33333333%; top: 220px }
.lottery .lottery-item ul li:nth-child(7) { left: 0; top: 220px }
.lottery .lottery-item ul li:nth-child(8) { left: 0; top: 110px }
.lottery .lottery-item ul li .box { height: 100px; position: relative; text-align: center; overflow: hidden; background: url(../img/bg2.png) no-repeat center; background-size: 100% 100% }
.lottery .lottery-item ul li .box img { display: block; height: 50px; margin: 0 auto; margin-top: 10px; margin-bottom: 5px }
.lottery .lottery-item ul li .box p { color: #708abf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px }
.lottery .lottery-item ul li.on .box { background: url(../img/bg1.png) no-repeat center; background-size: 100% 100% }
.lottery .lottery-item ul li.on .box p { color: #fff }
.lottery .lottery-item .lottery-start { position: absolute; left: 33.33333333%; width: 33.33333333%; top: 110px; padding-right: 10px }
.lottery .lottery-item .lottery-start .box { height: 100px; font-size: 14px; color: #fff; cursor: pointer; text-align: center; overflow: hidden; background: url(../img/bg1.png) no-repeat center; background-size: 100% 100% }
.lottery .lottery-item .lottery-start .box p b { font-size: 40px; margin-top: 16px; margin-bottom: 15px; line-height: 30px; display: block }
.lottery .lottery-item .lottery-start .box:active { opacity: .7 }
.lottery .lottery-item .lottery-start .box.gray { background: url(../img/bg3.png) no-repeat center; background-size: 100% 100% }
.lottery .lottery-item .lottery-start .box.gray p { color: #708abf; font-weight: 700 }
.mask { width: 100%; height: 100%; background: rgba(0,0,0,.7); position: fixed; overflow: hidden; z-index: 222; top: 0; left: 0 }
.lottery-alert { max-width: 400px; text-align: center; z-index: 10000; border-radius: 10px; background: #fff; padding: 20px; position: fixed; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%) }
.lottery-alert h1 { font-size: 18px; font-weight: 700; color: #d92b2f }
.lottery-alert img { display: block; height: 120px; margin: 0 auto }
.lottery-alert h2 { font-weight: 400; color: #d92b2f; font-size: 15px; padding-top: 15px }
.lottery-alert p { color: #666; font-size: 16px; padding-top: 5px }
.lottery-alert .btnsave { border-radius: 3px; box-shadow: none; height: 40px; cursor: pointer; line-height: 40px; color: #fff; margin-top: 12px; background: linear-gradient(180deg, rgba(213,60,63,1) 0%, rgba(201,20,24,1) 100%); font-size: 16px }


三、JS 


new Vue({
    el: "#app",
    data: {
        isStart: 1,
        score: 10,
        list: [{
            img: 'img/j1.png',
            title: '谢谢参与'
        },
        {
            img: 'img/j2.png',
            title: '美女一个'
        },
        {
            img: 'img/j1.png',
            title: '宝马一辆'
        },
        {
            img: 'img/j2.png',
            title: '单车一辆'
        },
        {
            img: 'img/j1.png',
            title: '鸡蛋一蓝'
        },
        {
            img: 'img/j2.png',
            title: '500红包'
        },
        {
            img: 'img/j1.png',
            title: '靓号一个'
        },
        {
            img: 'img/j2.png',
            title: '鲜花一蓝'
        }],
        index: -1,
        count: 8,
        timer: 0,
        speed: 200,
        times: 0,
        cycle: 50,
        prize: -1,
        click: true,
        showToast: false,
    },
    mounted() {},
    methods: {
        startLottery() {
            if (!this.click) {
                return
            }
            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.speed = 200 this.click = true;
                var that = this;
                setTimeout(res = >{
                    that.showToast = true;
                },
                500)
            } 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
                    }
                } 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
        },
    }
})



查看下载地址：https://www.jq22.com/jquery-info22357




上一篇：git码云使用命令

下一篇：VUE 实现TAB菜单左滑始终居中显示效果

相关文章

点击排行

神夜原创炫酷弹窗插件hsycmsAlert.js

本栏推荐

完美后台框架syadmin

猜你喜欢

站点信息

  • 建站时间：2017-10-24
  • 网站程序：Hsycms 3.0
  • 文章统计：511条
  • 微信公众号：扫描二维码，关注我们