Vue nine palace lottery

Time:2021-3-7

Suddenly want to write a thing about the lottery, draw lessons from the realization of other bigwigs. Make a probability type of lottery, CSS and data are fooling. I don’t want to optimize. Ha ha ha ha

<template>
  <div class="home_page">
    <!--    <headerPage />-->
    <content-page>
      < div > lottery test
      <div class="choujiang">
        <ul class="ul">
          <li
            v-for="(item,i) in arr"
            :key="i"
            :class="{isActive:i === index }"
            class="li"
          > {{ item }} </li>
        </ul>
      </div>
      <! -- < div show = "isshow" class = "begin" @ Click = "begin" > start lucky draw < / div > -- >
      <! -- < div show =! Isshow "class =" begin "@ Click =" stop "> end the raffle < / div > -- >
      < div v-show = "isshow" class = "begin" @ Click = "startlottery" > start lucky draw < / div >

    </content-page>
  </div>
</template>

<script>
// import headerPage from '../components/header_page'
import contentPage from '../components/content_page'
// import footerPage from '../components/footer_page'
export default {
  name: 'Home',
  components: {
    // headerPage,
    contentPage,
    // footerPage,
  },
  data() {
    return {
      arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      isShow: true,
      randomIndex: -1,
      curIndex: 0,
      // timer: '',
      /**Revised version**/
      Index: - 1, // where is the current rotation and the starting point
      Count: 10, // how many positions are there in total
      Timer: 0, // turn the timer every time
      Speed: 200, // initial rotation speed
      Times: 0, // number of turns
      Cycle: 50, // basic number of rotations: that is, how many rotations are required before entering the lottery
      Prize: - 1, // winning position
      click: true,
      Showtoast: false, // display the win pop-up window
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },

  methods: {
    startLottery() {
      if (!this.click) { return }
      this.startRoll()
    },
    //Start turning
    startRoll() {
      this.times  +=1 // number of turns
      this.oneRoll () // each rotation method called by the rotation procedure, here is the first call to initialization
      //If the current rotation times meet the requirements & the current position is the winning position
      if (this.times > this.cycle && this.prize === this.index) {
        this.$message({
          type: 'success ',
          Message: ` number:${ this.index }`,
        })
        //  console.log ('won the prize ')
        // console.log(this.index)
        // console.log(this.prize)
        // console.log(this.times)
        // console.log(this.speed)
        clearTimeout( this.timer )// clear the rotation timer and stop the rotation
        this.prize = -1
        this.times = 0
        this.speed = 200
        this.click = true
        var that = this
        setTimeout(() => {
          that.showToast = true
        }, 500)
      } else {
        if (this.times < this.cycle) {
          this.speed  -=10 // speed up the rotation
        } else if (this.times === this.cycle) {
          // const index = parseInt( Math.random () * 10, 0) | 0 // get a winning position randomly

          this.prize  =  this.random () // the winning position can be returned from the background

          if (this.prize > 9) { this.prize = 9 }
        } else if (this.times > this.cycle && ((this.prize === 0 && this.index === 9) || 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)
      }
    },

    //Every turn
    oneRoll() {
      let index =  this.index  //Where is the current rotation
      const count =  this.count  //How many places are there altogether
      index += 1
      if (index > count - 1) { index = 0 }
      this.index = index
    },
    /**Generating probabilistic data**/
    random() {
      Const Arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // corresponding prize number
      Const arr2 = [0.02, 0.1, 0.1, 0.1, 0.1, 0.1, 0.01, 0.07, 0.3] // probability of prize number
      let sum = 0
      let factor = 0
      let random = Math.random()

      for (let i = arr2.length - 1; i >= 0; i--) {
        Sum + = arr2 [i] // sum of statistical probabilities
      }
      Random * = sum // generating probabilistic random numbers (just to make the defined part a let) can be omitted
      for (let m = arr2.length - 1; m >= 0; m--) {
        factor += arr2[m]
        if (random <= factor) {
          return arr1[m]
        }
      }
      return null
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base.scss";
  .home_page{
    font-size: pxTorem(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    .choujiang{
      .ul{
        width: pxTorem(240px);
        display: flex;
        flex-wrap: wrap;
        .li{
          padding: pxTorem(8px) pxTorem(20px);
          margin: pxTorem(10px) pxTorem(10px);
          /*background-color: salmon;*/
          border: 1px solid;
        }
      }
    }
    .begin{
      margin-top: pxTorem(40px);
      padding: pxTorem(18px) pxTorem(24px);
      background-color: salmon;
      text-align: center;
      cursor: pointer;
    }

  }
  .isActive{
    background-color: salmon;
  }
</style>