本文實例為大家分享了JavaScript實現班級抽簽小程序的具體代碼，供大家參考，具體內容如下

項目展示

項目中假設一個班只有三十個人

html結構

請問你要抽幾個xx班的小寶貝呢？

開始抽簽

制作者：chenyu-max

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; // 計數器，用以 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() {

// 檢查輸入的內容是否是是1~30人

// 若是班級人數不止三十人，改成 input.value < 班級人數 + 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 的隨機數

// 需要更改人數，直接修改 乘號后面的 30 未你們班需要的人數即可

var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30

var flag = true;

arr.forEach(function(value) {

// 遍歷數組，防止生成的隨機數和已有的數字重復

if (value == temp) {

flag = false;

}

})

if (flag) {

arr.push(temp);

}

}

// 將抽出的人數的學號進行升序排序

arr.sort(function(a, b) {

return a - b;

})

var str = arr.join(", ");

viewDiv.innerHTML = " 恭喜以下小可愛/帥哥 被抽中！ " + str;

} else {

// 若不是，則輸出錯誤提示

// 人數可以修改

viewDiv.innerHTML = "請輸入正確的人數(1 ~ 30)哦";

}

}

增加功能

document.onkeydown = function(e) {

// 摁下回車鍵 觸發 btn 的onclick事件

if (e.keyCode == 13) {

btn.onclick();

}

}

全部代碼

給xx班小寶貝來個抽簽

.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;

}

請問你要抽幾個xx班的小寶貝呢？

開始抽簽

制作者：chenyu-max

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; // 計數器，用以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) {

// 摁下回車鍵 觸發 btn 的onclick事件

if (e.keyCode == 13) {

btn.onclick();

}

}

btn.onclick = function() {

// 檢查輸入的內容是否是是1~30人

// 若是班級人數不止三十人，改成 input.value < 班級人數 + 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 的隨機數

// 需要更改人數，直接修改 乘號后面的 30 未你們班需要的人數即可

var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30

var flag = true;

arr.forEach(function(value) {

// 遍歷數組，防止生成的隨機數和已有的數字重復

if (value == temp) {

flag = false;

}

})

if (flag) {

arr.push(temp);

}

}

// 將抽出的人數的學號進行升序排序

arr.sort(function(a, b) {

return a - b;

})

var str = arr.join(", ");

viewDiv.innerHTML = " 恭喜以下小可愛/帥哥 被抽中！ " + str;

} else {

// 若不是，則輸出錯誤提示

// 人數可以修改

viewDiv.innerHTML = "請輸入正確的人數(1 ~ 30)哦";

}

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html 抽签分小组代码,JavaScript实现班级抽签小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。