Vue.js制作老虎机抽奖

我就先直接上代码了吧~
实现原理是使用background的background-position-Y属性每隔100毫秒或者50毫秒增加background-position-Y的值，背景图一定要是雪碧图哦～

<style lang='less' scoped>
body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    max-width: 750px;
    .down-up-translate-fade-enter-active,
    .down-up-translate-fade-leave-active {
        transition: all 0.1s;
        -webkit-transition: all 0.1s;
        -moz-transition: all 0.1s;
        -o-transition: all 0.1s;
    }

    .down-up-translate-fade-enter,
    .down-up-translate-fade-leave-active {
        opacity: 1;
    }

    .down-up-translate-fade-enter {
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
    }

    .down-up-translate-fade-leave-active {
        transform: translateY(-50px);
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -o-transform: translateY(-50px);
    }
    img {
        width: 100%;
        float: left;
    }
    .isornodo {
        width: 50%;
        float: left;
        margin-left: 25%;
        text-align: center;
        margin-top: -73%;
        font-size: 0.2rem;
        color: #e33735;
    }
    .applybtn {
        width: 40%;
        margin-left: 30%;
        margin-top: -22%;
    }
    .num {
        width: 68%;
        height: 1rem;
        overflow: hidden;
        margin-top: -58.7%;
        float: left;
        margin-left: 16%;
        position: relative;
        border-radius: 0.1rem;
        .one {
            width: 0.82rem;
            height: 3rem;
            background: url('https://ojlf2aayk.qnssl.com/tigger_03.png') center center repeat-y;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.03rem;
            background-attachment: scroll;
            &:nth-child(2) {
                width: 0.85rem;
            }
            &:nth-child(3) {
                float: right;
                margin: 0;
            }
        }
    }
    .luckybtn {
        width: 50%;
        margin-left: 25%;
        margin-top: -24%;
    }
}
</style>
<template>
<div>
  <img src="https://ojlf2aayk.qnssl.com/tiger_01.png" alt="">
  <img src="https://ojlf2aayk.qnssl.com/tiger_02.png" alt="">
  <div class="isornodo">— {{title}} —</div>
  <div class="num">
    <transition name="down-up-translate-fade">
      <div class="one" :style="{backgroundPositionY: numone + 'rem'}"></div>
    </transition>
    <transition name="down-up-translate-fade">
      <div class="one" :style="{backgroundPositionY: numtwo + 'rem'}"></div>
    </transition>
    <transition name="down-up-translate-fade">
      <div class="one" :style="{backgroundPositionY: numthe + 'rem'}"></div>
    </transition>
  </div>
  <img src="https://ojlf2aayk.qnssl.com/onebtn.png" v-if="isLucky" class="luckybtn" @click="start">
  <img src="https://ojlf2aayk.qnssl.com/onebtn_01.png" v-else>
  <img src="https://ojlf2aayk.qnssl.com/tiger_03.png" alt="">
  <img src="https://ojlf2aayk.qnssl.com/tiger_04.png" alt="">
</div>
</template>
<script>
import toast from 'toast'
export default {
  data() {
    return {
      title: '今日已签到',
      isLucky: true,
      interval: false,
      numone: 0,
      numtwo: 0,
      numthe: 0,
      textone: 24,
      texttwo: 27,
      textthe: 30
    }
  },
  methods: {
    start() {
      if (this.interval) {
        this.timeone(0)
        setTimeout(() => {
          this.timetwo(0)
        }, 500)
        setTimeout(() => {
          this.timethe(0)
        }, 1000)
      } else {
        toast('你没抽奖机会啦，坚持签到就会得到机会哦')
      }
    },
    timeone(num) {
      var t = setInterval(() => {
        if (num <= this.textone) {
          num += 0.5
          this.numone = num
        } else {
          clearInterval(t)
          this.numone = this.textone
        }
      }, 100)
    },
    timetwo(num) {
      var t = setInterval(() => {
        if (num <= this.texttwo) {
          num += 0.5
          this.numtwo = num
        } else {
          clearInterval(t)
          this.numtwo = this.texttwo
        }
      }, 100)
    },
    timethe(num) {
      var t = setInterval(() => {
        if (num <= this.textthe) {
          num += 0.5
          this.numthe = num
        } else {
          clearInterval(t)
          this.numthe = this.textthe
        }
      }, 100)
    }
  },
  mounted() {
  }
}
</script>

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界