<div class="container" x-data="jixuan()" x-init="() => {getRandFive()}">
<h1>双色球机选五注</h1>
<div class="jixuan">
<ul class="jx-list">
<template x-for="(zu, index) in five" :key="index">
<li>
<template x-for="i in zu"><span x-text="i"></span></template>
</li>
</template>
</ul>
</div>
<div class="caozuo">
<button @click="runningFive" x-text="beginbtn"></button>
</div>
</div>
<script>
window.jixuan = function() {
return {
allredball: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33'],
allblueball: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16'],
five: [],
interval: null,
beginbtn: '开始摇号',
getRandomArrayElements(arr, count) {
let shuffled = arr.slice(0),
i = arr.length,
min = i - count,
temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
},
getRandFive() {
let a = [],
b = [];
let reds = this.allredball;
let blues = this.allblueball;
for (let i = 0; i < 5; i++) {
b = this.getRandomArrayElements(reds, 6).sort((a, b) => {
return a - b
});
b.push(this.getRandomArrayElements(blues, 1)[0]);
a.push(b);
}
this.five = a;
},
runningFive() {
const that = this
if (this.interval == null) {
this.beginbtn = '停止摇号';
this.interval = setInterval(function() {
that.getRandFive();
}, 60)
} else {
this.beginbtn = '开始摇号';
clearInterval(this.interval);
this.interval = null;
}
}
}
}
</script>
alpine.js可以说是非常简单的一个js框架了,相对于vue或其他框架而言不论是功能还是文档都非常的轻量化,这个工具是我边看文档边写的;这里省去了css代码。
alpine.js中文文档:https://www.alpinejs.cn/
具体效果可以参考演示地址:https://shuangseqiu.wangzhanb.com/jixuan.html