vue3实现一个抽奖小项目
前言
- 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下。
- 浏览链接:http://xisite.top/original/luckDraw/index.html
- 项目链接:https://gitee.com/xi1213/luck-draw (欢迎star!)
- 项目截图:
实现目标
- 数据保存:无后端,纯前端实现,浏览器刷新或者关闭数据不能丢失。
- 姓名切换:点击中部开始按钮姓名快速切换。
- 奖项切换:奖项为操作人员手动切换设置。
- 历史记录:抽奖完成后需要有历史记录。
- 数据导入:允许参与人员的表格导入。
数据保存
无后台,纯前端实现而且需要刷新关闭浏览器数据不丢失,很容易便会想到使用localStorage,localStorage存入的数据具有持久性,不会因为刷新或关闭浏览器而变化(除非手动刻意的清除),有别于sessionstorage,localStorage的生命周期是永久,sessionstorage是浏览器或者标签页关闭。
因为存入的数据不是单纯的字符串,而是具有结构性的对象数组,所以需要配合JSON.stringify与JSON.parse来使用。这是存入数据的方法:
localStorage.setItem("luckDrawHis", JSON.stringify(luckDrawHis));//JSON.stringify将json转换为字符串
这是读取数据的方法:
JSON.parse(localStorage.getItem("luckDrawHis"))//JSON.parse将字符串转换为json
姓名切换
抽奖的方式是数据导入后,点击中间的圆形开始按钮,姓名便开始快速切换,再次点击按钮便停止姓名切换,弹出对话框显示当前姓名以及设置的奖项。
切换姓名利用了vue的数据响应式原理。先获取到所有的参与人员数据,然后乱序处理,最后循环展示,我这里每个姓名展示的时间为50毫秒,你也可以自己设置。这里的数组乱序我使用了洗牌算法,其实就是利用Math.random获取数组的随机下标,然后与最后一个元素进行位置交换。
//洗牌算法(乱序数组)
function shuffle(arr) {let l = arr.lengthlet index, tempwhile (l > 0) {index = Math.floor(Math.random() * l)temp = arr[l - 1]arr[l - 1] = arr[index]arr[index] = templ--}return arr;
}//循环列表
function forNameList(list) {list = shuffle(list);for (let i = 0; i < list.length; i++) {setTimeout(() => {if (!isStop.value) {curName.value = list[i].name;(i == list.length - 1) && (forNameList(nameList.value));//数组耗尽循环}}, 50 * i);}
}
奖项切换
奖项切换直接使用elementPlus的单选框即可。
历史记录
每次点击抽奖出现结果时,将之前的抽奖结果取出来,然后把当前的结果添加到末尾。
点击抽奖历史按钮时再将所有历史数据取出来。
数据导入
由于需要导入人员表格数据,这里我使用了xlsx插件与file-saver插件来实现。
首先是下载模板。
将事先准备好的表格模板放在项目的public目录下。
点击下载模板按钮时直接调用以下方法即可,其中的saveAs是file-saver插件中的方法,传入路径与文件名即可。
import { saveAs } from 'file-saver';
//下载模板
function downTemp() {let fileName = "人员模板.xlsx";//文件名let fileUrl = "./template/";//文件路径(路径相对index.html)saveAs(fileUrl + fileName, fileName);
}
表格处理好,
点击导入按钮读取表格数据时使用的是xlsx插件,下面是读取数据的方法。
import * as XLSX from "xlsx";
//导入数据
function importData(e) {isLoading.value = true;let file = e.target.files[0]; //获取事件中的file对象let fileReader = new FileReader(); //创建文件读取器fileReader.onload = (event) => {let result = event.target.result; //获取读取的结果let workBook = XLSX.read(result, { type: "binary" }); //XLSX读取返回的结果let jsonData = XLSX.utils.sheet_to_json(workBook.Sheets[workBook.SheetNames[0]]); //将读取结果转换为jsontabData.value = [];jsonData.forEach((j) => {tabData.value.push({name: j.姓名,age: j.性别,department: j.部门,});}); //处理成需要的数据格式localStorage.setItem("tabData", JSON.stringify(tabData.value));//数据存入本地tabDataS.value = JSON.parse(localStorage.getItem("tabData"));//取出数据emits("getNameList", tabData);isLoading.value = false;};fileReader.readAsBinaryString(file); //开始读取文件((document.getElementsByClassName("inp-xlsx")[0]).value = ""); //置空选中的文件
};
结语
- 项目很简单,但给我的时间很少,很多优化的地方都没做好,后面有时间了再优化下,顺便适配下移动端。
- 原文地址:https://xiblogs.top/?id=53
vue3实现一个抽奖小项目相关推荐
- 我的第一个MFC小项目(4)之 位图转换(续)
非常感谢Imageshop的指正,代码有修改,主要是: 计算8位位图像素位使用了更高效的整点运算: 去除多余的变量检测. 求网友们支招:在32位位图中有Alpha值,在转换成8位灰阶位图的时候可以直接 ...
- python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源)
python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源) 见链接
- 我的第一个JDBC小项目
我的第一个JDBC小项目 引言:以下都是个人学习中的一些总结,本人能力有限,其中存在很多错误与不足,还请阅读者斧正.!并非教程!!并非教程!!并非教程! JDBC是Java DataBase Conn ...
- 随机抽奖程序(每天一个python小项目)
import random num = [] # 用于存放抽奖码 print("欢迎来到抽奖小程序!")while True:usernum = input("请输入参与 ...
- 基于tkinter的随机抽奖程序(每天一个python小项目)
import csv import tkinter as tk import tkinter.messagebox import datetime import pandas as pd import ...
- 安卓入门系列-09一个实战小项目(备忘录Memo)
一个简单的安卓平台下的备忘录 背景 之前已经介绍了不少的控件(TextView和ListView等等)以及开发中最常见的组件(Activity)(Service的权重在我心中没有Activity重要, ...
- 将一个项目中的图片存到另一个项目中_复盘一个Smart200小项目(2)
这一部分回顾一下确认项目功能需求的过程. 硬件系统选择: 第一阶段,陆陆续续在微信和电话上扯了大约一个周,确定了采用高级语言开发上位机的方案,准备开始确定采用什么PLC和触摸屏了,哥们说客户对使用什么 ...
- python秒表项目_第一个Python小项目——秒表
一.项目描述: 前言: 这只是我今天试着写的一个小项目,这个项目我发在博客上只是为了便于保存,日后自己看起来方便,所以很多地方没有写注释,如果大家有什么想法,欢迎给我留言. 项目名称: 简易秒表 开发 ...
- 抽奖随机滚动_仅需2分钟,使用excel制作一个抽奖小工具,再也不用为抽奖发愁了...
Hello,大家好,今天跟大家分享下我们如何使用excel制作一个抽奖工具,他的制作也非常的简单,我们先来看下效果,按住F9键就能让名字滚动起来,松开F9键后就会停止,如下图 想要实现这样的操作也非常 ...
最新文章
- 一次完整的从webshell到域控的探索之路
- 原创:Docker在云家政的应用 谢绝复制粘贴内容
- keepalived lvs
- centos8 配置 dns_Linux搭建DHCP+DNS+WEB服务
- 关于echarts的疑问
- U盘怎么重装系统到电脑上
- wordpress建立二级导航菜单
- 秀拍客电脑版 v1.0正式版
- 关于伪分布式hadoop集群及HBase安装的一些记录(基于林子雨老师的大数据软件安装和基础编程)
- 移动互联网创业:美国不代表全球
- java media player 设置音量_SoundPlayer可调音量 - c#
- Windows10局域网找不到共享电脑
- system 权限读取注册表HKEY_CURRENT_USER
- 【思维导图】Excel转成思维导图
- 直播新秀之微信小程序直播
- 【Java设计模式】组合模式
- websocket访问ServletAPI
- GPS经纬度转化为百度地图/Google坐标及互转方案
- 可口可乐、诺华、葛兰素史克、思爱普、OPPO、HTC等公司高管变动
- 12种论坛常用的推广方法