vue3實現一個抽獎小項目

来源:https://www.cnblogs.com/xi12/archive/2023/01/20/17062917.html
-Advertisement-
Play Games

前言 在公司年會期間我做了個抽獎小項目,我把它分享出來,有用得著的可以看下。 瀏覽鏈接: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 = 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]]
        ); //將讀取結果轉換為json
        tabData.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

原創者:曦12

原文鏈接:https://www.cnblogs.com/xi12/p/17062917.html

轉載請註明原創者添加原文鏈接!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在工作中,為了防止文件被隨意複製和傳播,通常我們會選擇在文檔中添加水印來對文件進行有效保護。文字水印是比較常見的一種保護手段,它可以有效防止文件被任意複製和隨意列印傳播。不過,Excel預設並沒有水印功能。此時,我們可以把插入的藝術字作為水印,將水印和工作表融合在一起,以防止文檔被覆制傳播。那麼如何 ...
  • 如何實現在react現有項目中嵌入Blazor? 目前官方只提供了angular和react倆種示例所以本教程只將react教程 思路講解: 首先在現有react項目中我們可能某些組件是在Blazor中完成,但是我們沒辦法找到怎麼在react中輕量級使用blazor組件,可能會有人會使用iframe ...
  • 字元格式設置是指用戶對字元的屏幕顯示和列印輸出形式的設定。Word文檔中的字元格式有:字體、字型大小、字體顏色、高亮顏色、邊框、下劃線、斜體、陰影字、著重號等等。帶格式的文本可以突出內容重點,引起讀者註意。應用字元格式可以使簡單的文檔變得比只使用純文本更具吸引力。本文將為您介紹一種高效便捷的方法,通過編 ...
  • 這周收到兩片基於LGT8F328P LQFP32的Arduino Mini EVB, 機器上沒有 Arduino 環境需要新安裝, 正好感受一下新出的 Arduino IDE 2.x, 記錄一下 Ubuntu 20.04/22.04 下安裝 Arduino IDE 2.x 的過程. ...
  • 最近幾天用Python寫了個介面後臺服務,把它部在了伺服器的300埠上。之後,我又要把一個二級功能變數名稱解析到該伺服器的300埠上,此時就要用到NGINX了。因為之前對NGINX的使用並不熟悉,特此記錄下來,方便回顧。用了該方法,就能為伺服器上的多個不同介面服務綁定不同的功能變數名稱了,這也就是把多個功能變數名稱解析 ...
  • 打算整理彙編語言與介面微機這方面的學習記錄。 參考資料 西電《微機原理與系統設計》周佳社 西交《微機原理與介面技術》 課本《彙編語言與介面技術》王讓定 小甲魚《彙編語言》 1. 介紹 2022年春學習了MIPS視角下的電腦體繫結構與組成原理,同年夏自學了操作系統(科普級別的瞭解),彙編語言是學習操 ...
  • 使用子查詢 子查詢 查詢(query) 任何SQL語句都是查詢。但此術語一般指SELECT語句。 SQL還允許創建子查詢(subquery),即嵌套在其他查詢中的查詢。 利用子查詢進行過濾 SELECT cust_id FROM orders WHERE order_num IN (SELECT o ...
  • 比較簡單,只是模擬彩票出數字的過程,不計算單一數字的出現概率。 傳統上來說,每次彩票出號的概率都是獨立事件,單純的在可選數字內隨機實現即可。 本文探索的是實現簡單的預測分析,包含歷史開獎結果的連續事件。 舉例說明:(模擬三個數字,數字區域1-10) 第一次開獎 1,2,3 第二次預測 [4-10] ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...