Skip to content

Instantly share code, notes, and snippets.

@Python-37

Python-37/index.html

Last active September 18, 2023 00:38
Show Gist options
  • Save Python-37/e135b80671ab054f1909134f4c517e40 to your computer and use it in GitHub Desktop.
Save Python-37/e135b80671ab054f1909134f4c517e40 to your computer and use it in GitHub Desktop.
Download ZIP
chose a person randomly
Raw
index.html
<html lang="en">
<!-- version 0.2 -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Who is the lucky guy</title>
</head>
<style>
html * {
font-size: 35px;
}
.name_display_box {
width: 30%;
height: 100%;
margin-right: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
display: inline-table;
}
.name_display_box:last-child {
margin-right: 0;
}
button.green {
background: linear-gradient(to bottom, #00cc00, #009900);
border-radius: 5px;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button.blue {
background: linear-gradient(to bottom, #3399ff, #0066cc);
border-radius: 5px;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button.red {
background: linear-gradient(to bottom, #ff6666, #cc0000);
border-radius: 5px;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button.grey {
background-color: #ccc;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
textarea {
width: 100%;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
padding: 10px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background-color: #f2f2f2;
border-radius: 5px;
box-shadow: inset 0px 0px 5px white;
}
</style>
<script src="./jquery-3.7.1.min.js"></script>
<script>
var _name_list = [];
function getRandomElementsFromArray(array, count) {
var result = [];
if (array.length <= count) {
while (array.length > 0) {
result.push(array.shift());
}
} else {
for (var i = 0; i < count; i++) {
var randomIndex = Math.floor(Math.random() * array.length);
result.push(array[randomIndex]);
array.splice(randomIndex, 1);
}
}
return result;
}
function readFile(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var content = e.target.result;
$("#name_input_zone textarea").val(content);
};
reader.readAsText(file);
$("#input_name_by_hand").prop("disabled", true);
$("#input_name_by_hand").removeClass("red");
$("#input_name_by_hand").addClass("grey");
}
$(function () {
function updateNameList() {
// filte the empty line
var _content = $("#name_input_zone textarea").val();
_content = _content.replace(/^(\r\n|\n|\r|\t| )+/gm, "");
$("#name_input_zone textarea").val(_content);
_name_list = $.trim(_content)
.split(/\r\n|\r|\n/)
.filter((line) => line.trim() !== "");
}
$("#name_input_zone textarea").bind(
"input propertychange",
updateNameList()
);
// $("#name_input_zone textarea").change(updateNameList());
$("#name_input_zone button.draw").click(function () {
updateNameList();
var _repeatable =
$('#name_input_zone [name="repeatable"]').length === 1;
var _result = $("#result_zone").empty();
var _number = parseInt($("#number_input_zone").val());
if (isNaN(_number) | (_number < 1)) {
_result.html("正しい数値を入力するのは必要です");
return;
}
if (_name_list.length < 1) {
_result.html("名前を入力するのは必要です");
return;
}
var chosen_guys = getRandomElementsFromArray(_name_list, _number);
_result.append("<div>抽選結果(" + chosen_guys.length + "人)：</div>");
for (var i = 0; i < chosen_guys.length; i++) {
var _chosen_guy_div = `<div>${chosen_guys[i]}</div>`;
_result.append(_chosen_guy_div);
$("#choosed_persons").val(
$("#choosed_persons").val() + `${chosen_guys[i]}\n`
);
}
$("#name_input_zone textarea").val(_name_list.join("\n"));
});
$("#name_input_zone button.default").click(function () {
updateNameList();
});
$("#name_reset_button").click(function () {
$("#input_name_by_hand").prop("disabled", false);
$("#input_name_by_hand").removeClass("grey");
$("#input_name_by_hand").addClass("red");
var choosed_persons_list = $.trim($("#choosed_persons").val())
.split(/\r\n|\r|\n/)
.filter((line) => line.trim() !== "");
if (choosed_persons_list.length === 0) {
return;
} else {
var leaved_content = $("#name_input_zone textarea").val();
if (leaved_content.length > 0) {
$("#name_input_zone textarea").val(
leaved_content + "\n" + $("#choosed_persons").val()
);
} else {
$("#name_input_zone textarea").val($("#choosed_persons").val());
}
$("#choosed_persons").val("");
}
});
});
</script>
<body>
<!-- not choosed person -->
<div id="name_input_zone" class="name_display_box">
<label
>抽選人数:
<input id="number_input_zone" type="number" name="number" value="1"
/></label>
<div>
<textarea cols="30" rows="10"></textarea>
</div>
<div class="div-button">
<button class="button green" onclick="$('#txt_file_input').click()">
txtファイルを選択します
</button>
<input
type="file"
id="txt_file_input"
style="display: none"
onchange="readFile(event)"
/>
<button type="button" class="default red" id="input_name_by_hand">
名簿をインポート
</button>
<button type="button" class="draw blue">スタート</button>
</div>
</div>
<!-- choosed person -->
<div class="name_display_box">
安全地帯<br /><textarea
id="choosed_persons"
cols="30"
rows="10"
></textarea>
<div class="div-button">
<button type="button" class="default red" id="name_reset_button">
リセット
</button>
</div>
</div>
<!-- current choosed person -->
<div id="result_zone" class="name_display_box">
選択した名前がここに表示されます
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment