老虎机

其他 2020-04-11 19:12:32 阅读次数: 0

页面：

<template>
  <div class="m-ui-tiger">
    <div class="item">
      <ul class="roller">
        <li v-for="item in list1" :key="item.key">
          <img :src="item.value" alt=""/>
        </li>
      </ul>
    </div>
    <div class="item">
      <ul class="roller">
        <li v-for="item in list2" :key="item.key">
          <img :src="item.value" alt=""/>
        </li>
      </ul>
    </div>
    <div class="item">
      <ul class="roller">
        <li v-for="item in list3" :key="item.key">
          <img :src="item.value" alt=""/>
        </li>
      </ul>
    </div>
    <a id="js_toggle" class="toggle" href="javascript:;" @click="start"></a>
  </div>
</template>

<script>
import LotteryTiger from './tiger'
export default {
  name: 'Gift',
  data () {
    return {
      lottery: null,
      list1:[
        {
          key:2,
          value:require('../images/tiger_awards_2.png')
        },
        {
          key:1,
          value:require('../images/tiger_awards_1.png')
        },
        {
          key:3,
          value:require('../images/tiger_awards_3.png')
        },

      ],
      list2:[
        {
          key:3,
          value:require('../images/tiger_awards_3.png')
        },
        {
          key:2,
          value:require('../images/tiger_awards_2.png')
        },
        {
          key:1,
          value:require('../images/tiger_awards_1.png')
        },
      ],
      list3:[
        {
          key:1,
          value:require('../images/tiger_awards_1.png')
        },
        {
          key:3,
          value:require('../images/tiger_awards_3.png')
        },
        {
          key:2,
          value:require('../images/tiger_awards_2.png')
        },
      ],
      awrd:"",
      awrd1:""
    }
  },
  mounted() {
    var lottery = this.lottery= new LotteryTiger(document.getElementById('js_toggle'), document.querySelectorAll('.roller')) // eslint-disable-line
    lottery.on('start', async ()=> {
      let list = [];

      let awrd = await this.getData();
      console.log('awrd',awrd)
      console.log('awrd1',this.awrd1)
      if (awrd){
        this.list1.map((item,index)=>{
          if (item.key === awrd) {
            list.push(index)
          }
        })
        this.list2.map((item,index)=>{
          if (item.key === awrd) {
            list.push(index)
          }
        })
        this.list3.map((item,index)=>{
          if (item.key === awrd) {
            list.push(index)
          }
        })

        lottery.setResult(list);
      }

    })
    lottery.on('end', ()=> {
      console.log('接收结果')
    })
    lottery.on('reset', ()=> {
      console.log('接收结果reset')
    })
  },
  methods: {
    async start  (){
      // eslint-disable-next-line no-undef
      this.awrd1 = 222
      this.lottery.draw()
    },
    getData(){
        return new Promise(resolve => {
          console.log('发送数据')
          setTimeout(()=>{
            this.awrd = 4
            resolve('none')
          },100)
        })
    }
  }
}
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0
  }

  html {
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
  }

  html, body {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none
  }

  audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
  }

  img, video {
    max-width: 100%;
    height: auto;
    border: 0 none;
    vertical-align: bottom
  }

  li {
    list-style: none
  }

  svg:not(:root) {
    overflow: hidden
  }

  a {
    text-decoration: none
  }

  a, img, button, input[type='button'], input[type='submit'], input[type='reset'] {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
  }

  input:-ms-clear {
    display: none
  }

  input[type='search']::-webkit-search-cancel-button {
    display: none
  }

  input, textarea {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-appearance: none;
    outline: none
  }

  button, input, textarea {
    border: 0 none
  }

  body, button, input, textarea, select, option, pre, optgroup {
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Arial;
    color: #333;
    font-size: 0.6rem
  }

  .f-cb:after, .f-cb li:after {
    content: '';
    display: table;
    clear: both
  }

  .f-wsn {
    word-wrap: normal;
    white-space: nowrap
  }

  .f-wwb {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all
  }

  .f-toe {
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .f-ma {
    margin-left: auto;
    margin-right: auto
  }

  .f-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  .m-alert {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: transparent
  }

  .m-alert .text {
    width: 11rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    line-height: 1.4rem;
    font-size: 0.8rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 0.25rem
  }

  .m-alert.fx-fadeIn, .m-alert.fx-fadeOut {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: ease;
    animation-fill-mode: ease
  }

  [class*='fx-'] {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
  }

  .fx-bug {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible
  }

  .fx-gpu, .m-lottery-tiger .game .item .roller {
    -webkit-transform: "translateZ(0)";
    transform: "translateZ(0)";
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px
  }

  .fx-infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
  }

  .fx-fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }

  .fx-fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
  }

  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }

  @media screen and (min-width: 320px) {
    html {
      font-size: 20px
    }
  }

  @media screen and (min-width: 360px) {
    html {
      font-size: 22.5px
    }
  }

  @media screen and (min-width: 375px) {
    html {
      font-size: 23.4375px
    }
  }

  @media screen and (min-width: 384px) {
    html {
      font-size: 24px
    }
  }

  @media screen and (min-width: 400px) {
    html {
      font-size: 25px
    }
  }

  @media screen and (min-width: 412px) {
    html {
      font-size: 25.75px
    }
  }

  @media screen and (min-width: 414px) {
    html {
      font-size: 25.875px
    }
  }

  @media screen and (min-width: 533px) {
    html {
      font-size: 33.3125px
    }
  }

  @media screen and (min-width: 600px) {
    html {
      font-size: 37.5px
    }
  }

  @media screen and (min-width: 768px) {
    html {
      font-size: 48px
    }
  }

  .m-ui-dial {
    position: relative;
    width: 499px;
    height: 499px;
    margin: 0 auto;
    background: url("../images/dial_bg.png") no-repeat center;
    background-size: 100%
  }

  .m-ui-dial .pointer {
    margin-top: -139px !important;
    background: url("../images/dial_pointer.png") no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 150px;
    height: 238px;
    margin: -119px 0 0 -75px;
    -webkit-transform-origin: 75px 139px;
    transform-origin: 75px 139px
  }

  .m-ui-dial .btn {
    position: absolute;
    top: 64px;
    left: 0;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 75px
  }

  .m-ui-scratch {
    display: block;
    width: 300px;
    height: 172.5px;
    margin: 20px auto;
    background: no-repeat center;
    background-size: 100%
  }

  .m-ui-button {
    display: block;
    width: 160px;
    height: 32px;
    margin: 0 auto;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
    background-color: #f94804;
    cursor: pointer;
    border-radius: 5px
  }

  .m-ui-tiger {
    position: relative;
    width: 640px;
    height: 432px;
    margin: 20px auto;
    background: url("../images/tiger_bg.png") no-repeat
  }

  .m-ui-tiger .toggle {
    position: absolute;
    top: 306px;
    left: 119px;
    display: block;
    width: 404px;
    height: 50px
  }

  .m-ui-tiger .item {
    position: absolute;
    top: 77px;
    left: 139px;
    display: block;
    width: 110px;
    height: 135px;
    overflow: hidden
  }

  .m-ui-tiger .item:nth-child(2) {
    left: 265px
  }

  .m-ui-tiger .item:nth-child(3) {
    left: 391px
  }

  .m-ui-tiger .roller {
    position: relative
  }

  .m-ui-tiger .roller li {
    width: 110px;
    height: 135px;
    overflow: hidden
  }

  .m-ui-tiger .roller li:last-child {
    position: absolute;
    top: 100%;
    left: 0
  }

  .m-ui-tiger .roller img {
    display: block;
    width: 110px;
    height: 135px
  }

  .m-ui-tiger .roller.fx-roll {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-animation: fx-roll 0.5s 0s infinite linear;
    animation: fx-roll 0.5s 0s infinite linear
  }

  .m-ui-tiger .roller.fx-bounce {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s
  }

  .m-lottery-scratch {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 9rem;
    background: url("../images/scratch_page_bg.jpg") no-repeat #ff5e01;
    background-size: 100% auto
  }

  .m-lottery-scratch .game {
    position: relative;
    display: block;
    width: 10rem;
    margin: 0 auto;
    height: 5.75rem
  }

  .m-lottery-scratch .game canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% 100%
  }

  .m-lottery-scratch .game button {
    display: block;
    width: 5rem;
    height: 1.5rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.4rem;
    font-size: 0.7rem;
    color: #fff;
    background-color: #ff5e01;
    border: 0 none;
    cursor: pointer;
    border-radius: 0.3rem
  }

  .m-lottery-scratch .game button.z-dis {
    background-color: #bcbcbc
  }

  .m-lottery-scratch .game .ceiling {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 4rem;
    padding: 0.5rem 0 1.25rem;
    background: url("../images/scratch_ceiling.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden
  }

  .m-lottery-scratch .game .ceiling .tip {
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #ff5e01;
    overflow: hidden
  }

  .m-lottery-scratch .des {
    margin-top: 2.35rem;
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #fff
  }

  .m-lottery-scratch .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
  }

  .m-lottery-dial {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 7rem;
    background: url("../images/dial_page_bg.jpg") no-repeat #f94804;
    background-size: 100% auto
  }

  .m-lottery-dial .game-dial {
    position: relative;
    width: 12.5rem;
    height: 12.5rem;
    margin: 0 auto
  }

  .m-lottery-dial .game-dial .dial {
    width: 100%;
    height: 100%;
    background-size: 100% auto
  }

  .m-lottery-dial .game-dial .pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 5.95rem;
    margin: -3.4rem 0 0 -1.875rem;
    background-size: 100% auto;
    -webkit-transform-origin: 1.875rem 3.4rem;
    transform-origin: 1.875rem 3.4rem
  }

  .m-lottery-dial .game-dial .pointer span {
    position: absolute;
    top: 1.6rem;
    left: 0;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    cursor: pointer
  }

  .m-lottery-dial .des {
    margin-top: 4.2rem;
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #fff
  }

  .m-lottery-dial .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
  }

  .m-lottery-tiger {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 5.5rem;
    background: url("../images/tiger_page_bg.jpg") no-repeat #ffeec6;
    background-size: 100% auto
  }

  .m-lottery-tiger .game {
    position: relative
  }

  .m-lottery-tiger .game .back {
    width: 16rem;
    height: 10.8rem;
    background-size: 100%;
    background-repeat: no-repeat
  }

  .m-lottery-tiger .game .item {
    position: absolute;
    top: 1.925rem;
    width: 2.75rem;
    height: 3.375rem;
    overflow: hidden
  }

  .m-lottery-tiger .game .item:nth-child(1) {
    left: 3.475rem
  }

  .m-lottery-tiger .game .item:nth-child(2) {
    left: 6.625rem
  }

  .m-lottery-tiger .game .item:nth-child(3) {
    left: 9.775rem
  }

  .m-lottery-tiger .game .item .roller {
    position: relative
  }

  .m-lottery-tiger .game .item .roller li.z-last {
    position: absolute;
    top: 100%;
    left: 0
  }

  .m-lottery-tiger .game .item .roller.fx-bounce {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s
  }

  .m-lottery-tiger .game .item .roller.fx-roll {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-animation: fx-roll 0.3s 0s infinite linear;
    animation: fx-roll 0.3s 0s infinite linear
  }

  .m-lottery-tiger .game .item img {
    display: block;
    width: 2.75rem;
    height: 3.375rem
  }

  .m-lottery-tiger .game .btn {
    position: absolute;
    left: 50%;
    top: 7.65rem;
    width: 10.1rem;
    height: 1.25rem;
    margin-left: -5.05rem;
    background-size: 100%;
    background-repeat: no-repeat
  }

  .m-lottery-tiger .game .btn span {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
  }

  .m-lottery-tiger .des {
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #b26722
  }

  .m-lottery-tiger .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
  }

  @-webkit-keyframes fx-roll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
    100% {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0)
    }
  }

  @keyframes fx-roll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
    100% {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0)
    }
  }

  .fx-bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

  @-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
    40%, 43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0)
    }
    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0)
    }
    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0)
    }
  }

  @keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
    40%, 43% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0)
    }
    70% {
      -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0)
    }
    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0)
    }
  }

</style>

js：

Object.assign = Object.assign ||
  function (target) {
    // We must check against these specific cases.
    if (target === undefined || target === null) {
      throw new TypeError('Cannot convert undefined or null to object')
    }

    const output = Object(target)
    for (let index = 1; index < arguments.length; index++) {
      const source = arguments[index]
      if (source !== undefined && source !== null) {
        for (const nextKey in source) {
          if (source.hasOwnProperty(nextKey)) {
            output[nextKey] = source[nextKey]
          }
        }
      }
    }
    return output
  }

export default Object.assign

export default class Events {
  constructor () {
    this._queue = []
  }

  on (key, callback) {
    this._queue[key] = this._queue[key] || []
    this._queue[key].push(callback)
    return this
  }

  off (key, callback) {
    if (this._queue[key]) {
      const index = typeof (callback) === 'undefined' ? -2 : this._queue[key].indexOf(callback)
      if (index === -2) {
        delete this._queue[key]
      } else if (index !== -1) {
        this._queue[key].splice(index, 1)
      }
      if (this._queue[key] && this._queue[key].length === 0) delete this._queue[key]
    }
    return this
  }

  has (key) {
    return !!this._queue[key]
  }

  trigger (key, ...args) {
    if (this._queue[key]) {
      this._queue[key].forEach((callback) => callback.apply(this, args))
    }
    return this
  }
}

const animationEvent = function () {
  const el = document.createElement('div')
  const animations = {
    'animation': 'animationend',
    'webkitAnimation': 'webkitAnimationEnd',
    'msAnimation': 'MSAnimationEnd',
    'oAnimation': 'oanimationend'
  }

  for (const t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t]
    }
  }

  return null
}()

/**
 * 处理animate动画结束时间
 * @param el 绑定事件目标元素
 * @param callback 回调函数
 * @param animateTime 当不支持animationend使用settimeout处理 延迟时间
 */
export default function (el, callback, animateTime = 0) {
  function bind () {
    callback()
    el.removeEventListener(animationEvent, bind)
  }

  animationEvent ? el.addEventListener(animationEvent, bind) : setTimeout(() => callback(), animateTime)
}
Mr航
发布了80 篇原创文章 · 获赞 5 · 访问量 4万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_28473733/article/details/103998811
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
LogN级别的区间查询算法(线段树), 你学会了吗
数论概论(英文版.第4版)
idea 更新后和新的直接安装前，都需要配置 idea64.exe.vmoptions 后再使用
CANOpen系列教程04_CAN总线波特率、位时序、帧类型及格式说明
Java序列化基础
java排序算法整理
异常：org.apache.ibatis.reflection.ReflectionException
（算法练习）——二路归并排序
go 闭包函数
好程序员web前端技术分享媒体查询
每日归档
更多
2024-05-21(8)
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022