如何用alpinejs制作一个机选摇号器

<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 = thisif (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

如何用alpinejs制作一个机选摇号器相关推荐

C#制作一个简易抽奖或摇号器
自己制作了一个简易的摇号器,使用的是C#语言,利用随机数,在一个richtextbox里产生随机数字,利用两个numericupdown来控制范围和个数. 如图给摇号button添加click事件 ...
python可视化迷宫求解_如何用 Python 制作一个迷宫游戏
相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然 ...
怎么用python制作简单的程序-神级程序员教你如何用python制作一个牛逼的外挂！...
玩过电脑游戏的同学对于外挂肯定不陌生,但是你在用外挂的时候有没有想过如何做一个外挂呢?(当然用外挂不是那么道义哈,呵呵),那我们就来看一下如何用python来制作一个外挂.... 我打开了4399小游 ...
手把手教你如何用Python制作一个电子相册？末附python教程
这里简单介绍一下python制作电子相册的过程,主要用到tkinter和pillow这2个库,tkinter用于窗口显示照片,pillow用来处理照片,照片切换分为2种方式,一种是自动切换(每隔5秒) ...
[html] 制作一个多选的下拉框
[html] 制作一个多选的下拉框定义盒子 a标签绑定事件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
如何用JAVA制作一个漂亮的表格
如何用JAVA制作一个漂亮的表格表格图片: 选中一行时高亮显示,且字体变为红色: 在表格中添加数据: 代码如下: import java.awt.BorderLayout; import java. ...
Swift - 制作一个在线流媒体音乐播放器（使用StreamingKit库）
在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器( 点击查看1. 点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如 ...
用html制作一个音乐排行榜,使用原生JavaScript制作一个漂亮的音乐播放器
简单介绍起初在简书上发现了这篇博客--[html.css.jq]制作一个简洁的音乐播放器.这是一个用jQuery库实现的音乐播放器,界面简约大气. 我在这个基础上,反其道而行,使用原生JavaScr ...
Python制作一个多功能音乐播放器
文章目录一.制作播放器的思路二.制作播放器知识点和所需模块三.播放器的代码展示一.制作播放器的思路制作一个多功能音乐播放器的思路确定播放器的需求和功能,例如支持哪些音频格式.播放列表管理. ...

如何用alpinejs制作一个机选摇号器

如何用alpinejs制作一个机选摇号器相关推荐

最新文章

热门文章