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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...