JavaScript實現(xiàn)班級抽簽小程序
更新時間:2021年05月19日 16:25:26 作者:是榆榆啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)班級抽簽小程序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)班級抽簽小程序的具體代碼,供大家參考,具體內(nèi)容如下
項目展示
項目中假設一個班只有三十個人
html結構
<div class="outerContainer"> <div class="question">請問你要抽幾個xx班的小寶貝呢?</div> <div class="number"> <input type="text" style="color: #999;" value="請輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數(shù)') {this.value = '';this.style.color = '#424242';}"> </div> <div class="btnWrapper"> <button>開始抽簽</button> </div> <div class="viewDiv"></div> <div class="foot">制作者:chenyu-max</div> </div>
CSS層疊樣式
.outerContainer { margin-top: 100px; } .question { margin-top: 30px; width: 100%; height: 50px; line-height: 50px; font-size: 25px; transition: all .3s linear; /* 顏色變化的時候,會有個漸變的效果 */ text-align: center; } .number { margin-top: 30px; display: block; left: 200px; text-align: center; } .number input { height: 30px; font-size: 20px; line-height: 30px; } .btnWrapper { margin-top: 30px; width: 100%; height: 30px; text-align: center; } .btnWrapper button { outline: none; color: rgb(233, 8, 8); cursor: pointer; border-radius: 15px; width: 100px; height: 25px; line-height: 19px; } .viewDiv { margin: 20px auto; width: 900px; height: 300px; text-align: center; font-size: 30px; line-height: 50px; border: 1px solid black; } .foot { margin: 0 auto; text-align: center; }
JS邏輯
獲取dom元素
var input = document.getElementsByTagName('input')[0]; var viewDiv = document.getElementsByClassName('viewDiv')[0]; var btn = document.getElementsByTagName('button')[0]; var question = document.getElementsByClassName('question')[0];
其余變量
var arr = []; // 存放抽取處的學號 var count = 0; // 計數(shù)器,用以 question 的顏色修改
question的顏色變化
setInterval(function() { var temp = count % 6; switch (temp) { case 0: question.style.color = 'red'; break; case 1: question.style.color = 'green'; break; case 2: question.style.color = 'blue'; break; case 3: question.style.color = 'grey'; break; case 4: question.style.color = 'purple'; break; case 5: question.style.color = 'black'; break; default: break; } count++; }, 700);
抽獎邏輯
btn.onclick = function() { // 檢查輸入的內(nèi)容是否是是1~30人 // 若是班級人數(shù)不止三十人,改成 input.value < 班級人數(shù) + 1 var check = (function() { if (input.value > 0 && input.value < 31) { return true; } else { return false; } }()); // 如果輸入的是正確的,那么進行抽簽 if (check) { var num = input.value; arr = []; for (var i = 0; arr.length < num; i++) { // 生成1 ~ 30 的隨機數(shù) // 需要更改人數(shù),直接修改 乘號后面的 30 未你們班需要的人數(shù)即可 var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30 var flag = true; arr.forEach(function(value) { // 遍歷數(shù)組,防止生成的隨機數(shù)和已有的數(shù)字重復 if (value == temp) { flag = false; } }) if (flag) { arr.push(temp); } } // 將抽出的人數(shù)的學號進行升序排序 arr.sort(function(a, b) { return a - b; }) var str = arr.join(", "); viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中!</span> </br> " + str; } else { // 若不是,則輸出錯誤提示 // 人數(shù)可以修改 viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(shù)(1 ~ 30)哦</span>"; } }
增加功能
document.onkeydown = function(e) { // 摁下回車鍵 觸發(fā) btn 的onclick事件 if (e.keyCode == 13) { btn.onclick(); } }
全部代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>給xx班小寶貝來個抽簽</title> <link rel="icon" href=""> <style> .outerContainer { margin-top: 100px; } .question { margin-top: 30px; width: 100%; height: 50px; line-height: 50px; font-size: 25px; transition: all .3s linear; text-align: center; } .number { margin-top: 30px; display: block; left: 200px; text-align: center; } .number input { height: 30px; font-size: 20px; line-height: 30px; } .btnWrapper { margin-top: 30px; width: 100%; height: 30px; text-align: center; } .btnWrapper button { outline: none; color: rgb(233, 8, 8); cursor: pointer; border-radius: 15px; width: 100px; height: 25px; line-height: 19px; } .viewDiv { margin: 20px auto; width: 900px; height: 300px; text-align: center; font-size: 30px; line-height: 50px; border: 1px solid black; } .foot { margin: 0 auto; text-align: center; } </style> </head> <body> <div class="outerContainer"> <div class="question">請問你要抽幾個xx班的小寶貝呢?</div> <div class="number"> <input type="text" style="color: #999;" value="請輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數(shù)') {this.value = '';this.style.color = '#424242';}"> </div> <div class="btnWrapper"> <button>開始抽簽</button> </div> <div class="viewDiv"></div> <div class="foot">制作者:chenyu-max</div> </div> <script> var input = document.getElementsByTagName('input')[0]; var viewDiv = document.getElementsByClassName('viewDiv')[0]; var btn = document.getElementsByTagName('button')[0]; var question = document.getElementsByClassName('question')[0]; var arr = []; // 存放抽取處的學號 var count = 0; // 計數(shù)器,用以question 的顏色修改器 setInterval(function() { var temp = count % 6; switch (temp) { case 0: question.style.color = 'red'; break; case 1: question.style.color = 'green'; break; case 2: question.style.color = 'blue'; break; case 3: question.style.color = 'grey'; break; case 4: question.style.color = 'purple'; break; case 5: question.style.color = 'black'; break; default: break; } count++; }, 700); document.onkeydown = function(e) { // 摁下回車鍵 觸發(fā) btn 的onclick事件 if (e.keyCode == 13) { btn.onclick(); } } btn.onclick = function() { // 檢查輸入的內(nèi)容是否是是1~30人 // 若是班級人數(shù)不止三十人,改成 input.value < 班級人數(shù) + 1 var check = (function() { if (input.value > 0 && input.value < 31) { return true; } else { return false; } }()); // 如果輸入的是正確的,那么進行抽簽 if (check) { var num = input.value; arr = []; for (var i = 0; arr.length < num; i++) { // 生成1 ~ 30 的隨機數(shù) // 需要更改人數(shù),直接修改 乘號后面的 30 未你們班需要的人數(shù)即可 var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30 var flag = true; arr.forEach(function(value) { // 遍歷數(shù)組,防止生成的隨機數(shù)和已有的數(shù)字重復 if (value == temp) { flag = false; } }) if (flag) { arr.push(temp); } } // 將抽出的人數(shù)的學號進行升序排序 arr.sort(function(a, b) { return a - b; }) var str = arr.join(", "); viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中!</span> </br> " + str; } else { // 若不是,則輸出錯誤提示 // 人數(shù)可以修改 viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(shù)(1 ~ 30)哦</span>"; } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
html的DOM中document對象anchors集合用法實例
這篇文章主要介紹了html的DOM中document對象anchors集合用法,實例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下2015-01-01JavaScript 使用 splice 方法刪除數(shù)組元素可能導致的問題分析
這篇文章主要介紹了JavaScript 使用 splice 方法刪除數(shù)組元素可能導致的問題分析,當在 JavaScript 中從數(shù)組中刪除元素時,使用 splice 方法時需要謹慎,本文給大家詳細講解,需要的朋友可以參考下2023-04-04