JavaScript實現班級抽籤小程式
阿新 • • 發佈:2021-05-20
本文例項為大家分享了javascript實現班級抽籤小程式的具體程式碼,供大家參考,具體內容如下
專案展示
專案中假設一個班只有三十個人
html結構
<div class="outerContainer"> <div class="question">請問你要抽幾個xx班的小寶貝呢?</div> <div class="number"> <input type="text" style="color: #999;" value="請輸入需要的人數" onblur="if (this.value == '') {this.value yCRuNSTJQ= '請輸入需要的人數';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數') {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; // 計數器,用以 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 = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中!</span> </br> " + str; } else { // 若不是,則輸出錯誤提示 // 人數可以修改 viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(1 ~ 30)哦</span>"; } }
增加功能
document.onkeydown = function(e) { // 摁下回車鍵 觸發 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%;
http://www.cppcns.com 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);
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="請輸入需要的人數" onblur="if (this.value == '') {this.value = '請輸入需要的人數';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數') {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; // 計數器,用以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 {
yCRuNSTJQ 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 = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中!</span> </br> " + str;
} else {
// 若不是,則輸出錯誤提示
// 人數可以修程式設計客棧改
viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(1 ~ 30)哦</span>";
}
}
</script>
</body>
</html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。