前言
- 在公司年會期間我做了個抽獎小專案，我把它分享出來，有用得著的可以看下，
- 瀏覽鏈接：http://xisite.top/original/luck-draw/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.length
let index, temp
while (l > 0) {
index = Math.floor(Math.random() * l)
temp = arr[l - 1]
arr[l - 1] = arr[index]
arr[index] = temp
l--
}
return arr;
}
//回圈串列
function forNameList(list) {
list = shuffle(list);
for (let i = 0; i < list.length; i++) {
setTimeout(() => {
if (!isStop.value) {
curName.value = https://www.cnblogs.com/xi12/archive/2023/01/20/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 = https://www.cnblogs.com/xi12/archive/2023/01/20/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 = https://www.cnblogs.com/xi12/archive/2023/01/20/XLSX.utils.sheet_to_json(
workBook.Sheets[workBook.SheetNames[0]]
); //將讀取結果轉換為json
tabData.value = [];
jsonData.forEach((j) => {
tabData.value.push({
name: j.姓名,
age: j.性別,
department: j.部門,
});
}); //處理成需要的資料格式
localStorage.setItem("tabData", JSON.stringify(tabData.value));//資料存入本地
tabDataS.value = https://www.cnblogs.com/xi12/archive/2023/01/20/JSON.parse(localStorage.getItem("tabData"));//取出資料
emits("getNameList", tabData);
isLoading.value = https://www.cnblogs.com/xi12/archive/2023/01/20/false;
};
fileReader.readAsBinaryString(file); //開始讀取檔案
((document.getElementsByClassName("inp-xlsx")[0]).valuehttps://www.cnblogs.com/xi12/archive/2023/01/20/= ""); //置空選中的檔案
};
結語
- 專案很簡單，但給我的時間很少，很多優化的地方都沒做好，后面有時間了再優化下，順便適配下移動端，
- 原文地址：https://xiblogs.top/?id=53
原創者：曦12
原文鏈接：https://www.cnblogs.com/xi12/p/17062917.html
轉載請注明原創者添加原文鏈接！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542337.html
標籤：其他