當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

班级抽签小程序——项目总结

發(fā)布時(shí)間：2023/12/20 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了班级抽签小程序——项目总结小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

項(xiàng)目展示

項(xiàng)目中假設(shè)一個(gè)班只有三十個(gè)人

html結(jié)構(gòu)

<div class="outerContainer"><div class="question">請(qǐng)問你要抽幾個(gè)xx班的小寶貝呢？</div><div class="number"><input type="text" style="color: #999;" value="請(qǐng)輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請(qǐng)輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請(qǐng)輸入需要的人數(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; /* 顏色變化的時(shí)候，會(huì)有個(gè)漸變的效果 */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 = []; // 存放抽取處的學(xué)號(hào) var count = 0; // 計(jì)數(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);

抽獎(jiǎng)邏輯

btn.onclick = function() {// 檢查輸入的內(nèi)容是否是是1~30人// 若是班級(jí)人數(shù)不止三十人，改成 input.value < 班級(jí)人數(shù) + 1var check = (function() {if (input.value > 0 && input.value < 31) {return true;} else {return false;}}());// 如果輸入的是正確的，那么進(jìn)行抽簽if (check) {var num = input.value;arr = [];for (var i = 0; arr.length < num; i++) {// 生成1 ~ 30 的隨機(jī)數(shù)// 需要更改人數(shù)，直接修改乘號(hào)后面的 30 未你們班需要的人數(shù)即可var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30var flag = true;arr.forEach(function(value) {// 遍歷數(shù)組，防止生成的隨機(jī)數(shù)和已有的數(shù)字重復(fù)if (value == temp) {flag = false;}})if (flag) {arr.push(temp);}}// 將抽出的人數(shù)的學(xué)號(hào)進(jìn)行升序排序arr.sort(function(a, b) {return a - b;})var str = arr.join(", ");viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥被抽中！</span> </br> " + str;} else {// 若不是，則輸出錯(cuò)誤提示// 人數(shù)可以修改viewDiv.innerHTML = "<span style='color : red'>請(qǐng)輸入正確的人數(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班小寶貝來個(gè)抽簽</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">請(qǐng)問你要抽幾個(gè)xx班的小寶貝呢？</div><div class="number"><input type="text" style="color: #999;" value="請(qǐng)輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請(qǐng)輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請(qǐng)輸入需要的人數(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 = []; // 存放抽取處的學(xué)號(hào)var count = 0; // 計(jì)數(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人// 若是班級(jí)人數(shù)不止三十人，改成 input.value < 班級(jí)人數(shù) + 1var check = (function() {if (input.value > 0 && input.value < 31) {return true;} else {return false;}}());// 如果輸入的是正確的，那么進(jìn)行抽簽if (check) {var num = input.value;arr = [];for (var i = 0; arr.length < num; i++) {// 生成1 ~ 30 的隨機(jī)數(shù)// 需要更改人數(shù)，直接修改乘號(hào)后面的 30 未你們班需要的人數(shù)即可var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30var flag = true;arr.forEach(function(value) {// 遍歷數(shù)組，防止生成的隨機(jī)數(shù)和已有的數(shù)字重復(fù)if (value == temp) {flag = false;}})if (flag) {arr.push(temp);}}// 將抽出的人數(shù)的學(xué)號(hào)進(jìn)行升序排序arr.sort(function(a, b) {return a - b;})var str = arr.join(", ");viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥被抽中！</span> </br> " + str;} else {// 若不是，則輸出錯(cuò)誤提示// 人數(shù)可以修改viewDiv.innerHTML = "<span style='color : red'>請(qǐng)輸入正確的人數(shù)（1 ~ 30）哦</span>";}}</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的班级抽签小程序——项目总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。