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
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...