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;
}
}
}
}
}
复制代码直接在页面就可以看到机选的双色球了。祝各位早日中奖。早日脱离苦海😂😂