基于vue写一个双色球

html:

<template>
  <!-- login -->
  <div class="container">
    <ul class="ssq_wrap">
      <li v-for="(item, index) in arr" :key="index">
        <span v-for="(e, i) in item" :key="i">{{e}}</span>
      </li>
    </ul>
  </div>
</template>

js:

export default {
  components: {
  },
  data () {
    return {
      arr: []
    }
  },
  mounted () {
    var that = this
    setTimeout(() => {
      that.arr = []
      function arrFun () {
        const numArr = []
        const time = setInterval(() => {
	 // 生成红球
          const redNum = Math.floor(Math.random() * (1 - 34) + 34)
	// 蓝球
          const blueNum = Math.floor(Math.random() * (1 - 17) + 17)
          numArr.push(redNum)
	 // 红球去重
          const n = arrRemoval(numArr)
          for (let i = 1; i < n.length; i++) {
            // 获取当前遍历数字。
            const currentNum = n[i]
            // 拿到上一个索引值进行比较
            let prevIndex = i - 1
            // 对红球进行排序
            while (prevIndex >= 0 && n[prevIndex] > currentNum) {
              n[prevIndex + 1] = n[prevIndex]
              prevIndex--
            }
            n[prevIndex + 1] = currentNum
          }
          if (n.length === 6) {
            n.push(blueNum)
            that.arr.push(n)
            clearInterval(time)
            // return n
          }
        }, 10)
        function arrRemoval (array) {
          const set = [...new Set(array)]
          return set
        }
      }
      const intervalFun = setInterval(() => {
        arrFun()
	// 机选多组， n+1
        if (that.arr.length === 4) {
          clearInterval(intervalFun)
        }
      }, 100)
    }, 2000)
  }
}

css:

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .ssq_wrap {
    margin: 100px 0 0 100px;
    li {
      margin-bottom: 20px;
      display: flex;
      span {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background: #ff0026;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-weight: bold;
        &:last-child {
          background: #2D8cF0;
        }
      }
    }
  }
}

复制代码直接在页面就可以看到机选的双色球了。祝各位早日中奖。早日脱离苦海😂😂