点名系统实现
演示： http://lu-renjiajia.gitee.io/random-roll-call
1.靜態頁面部分
主要采用css的彈性布局flex;
html代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><meta name="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /><title>?????辛?????</title><link href="./favicon(2).ico" rel="shortcut icon" type="image/x-icon" /><link rel="stylesheet" href="./css/index.css"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body><h1>被選中的小伙伴們:</h1><div class="ll"><select class="lxx" name="" id="aselect"><option value="5">5秒</option><option value="10">10秒</option><option value="15">15秒</option><option value="20">20秒</option></select><button class="lxx">開始</button><input class="lxx" type="text" id="personNum" value="1"></div><ul></ul><audio id="aut" src="./audio/自定義語言包.mp3" style="width: 0;"></audio> </body> <script src="./js/index.js"></script> </html>css代碼：
* {margin: 0;padding: 0;box-sizing: border-box;}body {padding: 20px 0px;background: url(../img/11.webp);background-size: cover;background-position: center top;background-repeat: no-repeat;}@media screen and (max-width:750px){body {background: url(../img/bg.webp);/* background-size: 100%; */background-size:cover;background-position: center top;background-repeat: no-repeat;}}h1 {padding: 10px;background-color: #327dcd;color: purple;/* margin: 10px 0; */transition: all 1s;text-align: center;}ul {list-style: none;display: flex;flex-wrap: wrap;justify-content: space-around;overflow: hidden;}li {width: 100px;height: 40px;background-color: rgb(71, 134, 222);color: #fff;display: flex;align-items: center;justify-content: center;margin: 10px;}/* 確定下來了 最終被選中 */.select {background-color: palevioletred;color: #fff;}.lxx{width: 100px;height: 50px;color: #fff;border: none;font-size: 20px;background: rgb(14, 149, 161);box-shadow: 40px 40px 80px rgb(71, 134, 222),-40px -40px 80px rgb(71, 134, 222);text-align: center;cursor: pointer;}.lxx:hover{background-color: rgb(11, 82, 181);}.ll{display: flex;justify-content: space-around;align-items: center;margin-top: 20px;}#personNum{height: 30px;}#aselect{height: 30px;}2.功能實現
功能1：渲染名單到頁面；
思路：即已拿到了字符串名稱；
可以通過字符串的split()方法來通過特定的字符來把字符串轉換為數組；
代碼如下：
const str = '張國穎 邱成武 謝曉華 廖浩然 竇廣燦 陳澤鋒 藍湘杰 陳錦田 陳天培 王德懷 吳柏奇 李遠寧 顏石偉 梁品鑫 范名杰 劉婷 梁海齡 戴嘉琪 張雄杰 潘科華 馬漢文 鄧嘉豪 周康凱 劉森琪 張陽 徐君豪 黃俊博 張家鳳 周日禧 黃善橋 藍梓豪 勞政永 林泓森 秦柏林 薛巖 張旭東 鐘世添 嚴文聰 余家凱 莫志俊 白麗臣 邱宗煥 梁碧燕 陳秋歌 黃光衡 侯正銘 劉辛 劉新勇 廖錦龍 謝文堅 曾子杭 滕飛 姚鑫濤 林蔚坤 彭奕安 廖有金 劉皓天 陳凱麟 陳巧 榮棒 莫格云 黃偉龍 闕娟 蘇彩 陳星 金金亮 黎梓燁 劉松 丘翠嫻 彭玉馨 肖根欽 陳冠錦 劉慶邦 曾海龍 謝偉平 劉文輝 于延杰';接下來把拿到的數組進行頁面渲染；通過反引號${}來獲取值，在通過innerHTML來添加進入我們要的標簽當中
let xuanRan = () => {let liHTML = "";for (let i = 0; i < arr.length; i++) {liHTML += `<li>${arr[i]}</li>`}ul.innerHTML = liHTML; }功能2：需要一個隨機函數，
通過Math對象里面的Math.random()方法！！！
let getRandom=(max, min)=>{return Math.floor(Math.random() * (max - min + 1) + min); }功能3：隨機抽取幸運觀眾
思路，先從整個數組中，抽取我定義的人的個數，把這些人存入一個數組，并返回，slice（x）可以從x下標開始，截取從該下標開始的到數組末尾的整個數組，并返回；
let myRandomArr = (arrList, num) => {if (num > arrList.length) {return;} else {let tempArr = arrList.slice(0);let newArrList = [];for (let i = 0; i < num; i++) {let random = getRandom(tempArr.length - 1, 0);let arr = tempArr[random];tempArr.splice(random, 1);newArrList.push(arr);}return newArrList;} }值得一提的是，我需要改變原數組的內容，保證我頁面已經渲染到的，被選出來的元素，不在被選中，我這采用了過濾操作，返回被選中的數組之外的元素，并重新賦值給原數組
for (let j = 0; j < choice.length; j++) {arr = arr.filter(item => item != choice[j]);}功能4：把我抽取的數組進行樣式的添加和渲染到結果和標簽中
思路：通過對整個數組的
for (let j = 0; j < choice.length; j++) {if (lis[i].innerText === choice[j]) {lis[i].classList.add("select");}}遍歷，先通過排他思想把所有的li的select類清除掉
其次我還有保留我上次選中的li的select不被清楚
思路：通過頁面中span標簽里面的innerTetx來與li中每一個進行對比，如果存在，那么在全部清除樣式后在把這個加上
for (let j = 0; j < spans.length; j++) {if (spans[j].innerText === lis[i].innerText) {lis[i].classList.add("select");}}說明：另一種思路，就是在排他時是就進行判定，如果存在，則不刪這個，使用continue跳出本次循環；（這里就不寫代碼了）;
功能5：為了保證我們能個一直產生隨機數，一直隨機抽取，我們需要一個定時器
思路，把功能四放進一個定時器里面，時間參數，為我們在自定義的時間（隨機抽取的速度）。即可
timer = setInterval(() => {//功能4 ,時間}功能6：我們需要設置隨機抽取的結束時間
思路：設置一個延時器，結束時間為我們在外面獲取的自定義設置的時間；然后再延時器里面清除定時器；然后重新渲染我們選中人后添加了select樣式的頁面；
setTimeout(() => {clearInterval(timer);xuanRanPerson();}, time1 * 1000)功能7：渲染我們抽中的人，加上select類后的樣式頁面
思路：通過insertAdjacentHTML()來進行添加，beforeend表示在子元素的末尾加，反引號``添加標簽
let xuanRanPerson = () => {for (let i = 0; i < choice.length; i++) {h1.insertAdjacentHTML("beforeend",`<span>${choice[i]}</span>`)}}功能8：修改h1文字的顏色，隨機變色
思路：通過rgb的三個值0-255，可以用隨機數范圍在0-255，隨機生成三個數給三個參數，q,w,e;通過style去修改
let q, w, e; setInterval(() => {q = getRandom(255, 0);w = getRandom(255, 0);e = getRandom(255, 0);h1.style.color = `rgb(${q},${w},${e})` }, 1000)功能9:谷歌瀏覽器的語音播報
思路：通過SpeechSynthesisUtterance對象來操作,為了保證每次讀的不會重復上次抽取到的人，每次播報完后進行置空，加“，”使瀏覽器閱讀一個名字后，會暫停一秒；
let bobao = () => {let text = namearr.join(",");let msg = new SpeechSynthesisUtterance(text);msg.rate = 0.3;msg.pitch = 1;msg.volume = 1;speechSynthesis.speak(msg);text = "";namearr = []; }功能10：開始按鈕的語音播報
思路：自己找al語音助手生成的語音，并錄制下來，然后轉為MP4格式，在利用audio的方法play(),pause()來進行控制
let audioPlay = () => {let aut = document.querySelector("#aut");if (aut !== null) {if (aut.paused) {aut.play();} else {aut.pause();}} }優化1：為了保證我點擊按鈕后不會觸發第二定時器，使頁面混亂；
思路：1.我在開啟定時器之前，關閉定時器；
2：直接點擊按鈕后，把按鈕禁用，只有延時器開始后，關閉定時器的時候，在把按鈕啟用；
優化2：對于自定義的人數，規定1-20人
源碼：
js：
const str = '張國穎 邱成武 謝曉華 廖浩然 竇廣燦 陳澤鋒 藍湘杰 陳錦田 陳天培 王德懷 吳柏奇 李遠寧 顏石偉 梁品鑫 范名杰 劉婷 梁海齡 戴嘉琪 張雄杰 潘科華 馬漢文 鄧嘉豪 周康凱 劉森琪 張陽 徐君豪 黃俊博 張家鳳 周日禧 黃善橋 藍梓豪 勞政永 林泓森 秦柏林 薛巖 張旭東 鐘世添 嚴文聰 余家凱 莫志俊 白麗臣 邱宗煥 梁碧燕 陳秋歌 黃光衡 侯正銘 劉辛 劉新勇 廖錦龍 謝文堅 曾子杭 滕飛 姚鑫濤 林蔚坤 彭奕安 廖有金 劉皓天 陳凱麟 陳巧 榮棒 莫格云 黃偉龍 闕娟 蘇彩 陳星 金金亮 黎梓燁 劉松 丘翠嫻 彭玉馨 肖根欽 陳冠錦 劉慶邦 曾海龍 謝偉平 劉文輝 于延杰'; let arr = str.split(" "); let ul = document.querySelector("ul"); let btn = document.querySelector("button"); let timer; let time1;let xiaoid; let namearr = []; let choice=[]; let data = []; let h1 = document.querySelector("h1"); let personNum = document.querySelector("#personNum"); //渲染頁面 let xuanRan = () => {let liHTML = "";for (let i = 0; i < arr.length; i++) {liHTML += `<li>${arr[i]}</li>`}ul.innerHTML = liHTML; } //調用 xuanRan(); //添加點擊事件 btn.addEventListener("click", (e) => {//清除定時器，延時器clearInterval(timer);clearTimeout(xiaoid)let lis = document.querySelectorAll("li");let aselect = document.querySelector("#aselect");let pernum = parseInt(personNum.value);let spans = document.querySelectorAll("span") || null;time1 = parseInt(aselect.value);//語音提示播報if (pernum > arr.length) {let str='您好，數據過大,查詢人數不得大于候選的人數';alert('您好，數據過大,查詢人數不得大于候選的人數')bobao(str);btn.disabled = false;return;}else if(pernum===0){let str='您好，要查詢的人數不能為0';alert('您好，要查詢的人數不能為0');bobao(str);btn.disabled = false;return;}else if (pernum > 20) {let str='您好，不能一次性查找20人以上';alert('您好，不能一次性查找20人以上');bobao(str);btn.disabled = false;return;} else {//調用開始的音頻audioPlay();timer = setInterval(() => {//從候選名單內獲取長度為pernum的不重復數組choice = myRandomArr(arr, pernum);//先把所有的li的樣式去掉for (let i = 0; i < lis.length; i++) {lis[i].classList.remove("select");for (let j = 0; j < spans.length; j++) {//已選中的，且渲染在span標簽里面的樣式加回來if (spans[j].innerText === lis[i].innerText) {lis[i].classList.add("select");}}//被選中的人加上樣式for (let j = 0; j < choice.length; j++) {if (lis[i].innerText === choice[j]) {lis[i].classList.add("select");}}}}, 50);//延時器，延時time1*1000 秒后清除定時器 time1為我頁面設置時間xiaoid=setTimeout(() => {//用于語音播報的數組添加我選中的人for (let i = 0; i < choice.length; i++) {namearr.push(choice[i]);}//創參數調用播報函數bobao(namearr);//防止我選中的人在此被選中，把我選中的數組外的人從新賦值給原數組for (let j = 0; j < choice.length; j++) {arr = arr.filter(item => item != choice[j]);}btn.disabled = false;clearInterval(timer);//渲染被選中，加上樣式的人xuanRanPerson();}, time1 * 1000)} }); //渲染被選中，加上樣式的人 let xuanRanPerson = () => {for (let i = 0; i < choice.length; i++) {h1.insertAdjacentHTML("beforeend",`<span>${choice[i]}</span>`)} } //獲取隨機數 let getRandom=(max, min)=> {return Math.floor(Math.random() * (max - min + 1) + min); } //生成rgb的三個參數 let q, w, e; setInterval(() => {q = getRandom(255, 0);w = getRandom(255, 0);e = getRandom(255, 0);h1.style.color = `rgb(${q},${w},${e})` }, 1000) //隨機抽取不重復的數組 let myRandomArr = (arrList, num) => {if (num > arrList.length) {return;} else {let tempArr = arrList.slice(0);let newArrList = [];for (let i = 0; i < num; i++) {let random = getRandom(tempArr.length - 1, 0);let arr = tempArr[random];tempArr.splice(random, 1);newArrList.push(arr);}return newArrList;} } //音頻的開關 let audioPlay = () => {let aut = document.querySelector("#aut");if (aut !== null) {if (aut.paused) {aut.play();} else {aut.pause();}} } //語音播報 let bobao = (a) => {let text;if(a instanceof Array){text = a.join(",");}else if(1||str){text=a;}let msg = new SpeechSynthesisUtterance(text);console.log(text);msg.rate = 0.6;msg.pitch = 1;msg.volume = 1;speechSynthesis.speak(msg);text = "";namearr = []; }總結
- 上一篇： Java计算任意多边形面积
- 下一篇： databricks使用教程