|
|
@@ -1,10 +1,10 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>申泽智能科技</title>
|
|
|
- <link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
|
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
|
<style>
|
|
|
body {
|
|
|
text-align: center;
|
|
|
@@ -21,7 +21,7 @@
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 5px;
|
|
|
- background-image: url('./back.png');
|
|
|
+ background-image: url("./back.png");
|
|
|
background-size: cover;
|
|
|
background-position: top center;
|
|
|
background-repeat: no-repeat;
|
|
|
@@ -55,7 +55,7 @@
|
|
|
margin-left: -4px;
|
|
|
margin-right: -4px;
|
|
|
font-size: 16px;
|
|
|
- font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
|
|
+ font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
}
|
|
|
input:focus,
|
|
|
textarea:focus {
|
|
|
@@ -64,7 +64,7 @@
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
- background-color: #3f51b5;
|
|
|
+ background-color: #545be7;
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
padding: 10px 20px;
|
|
|
@@ -76,7 +76,7 @@
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
button:hover {
|
|
|
- background-color: #2f3d88;
|
|
|
+ background-color: #2630e3;
|
|
|
}
|
|
|
.result-container {
|
|
|
margin-top: 20px;
|
|
|
@@ -103,32 +103,59 @@
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .custom-select {
|
|
|
+ position: relative;
|
|
|
+ width: 130px;
|
|
|
+ margin: 5px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-select select {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ border: 2px solid #94e07fa8;
|
|
|
+ border-radius: 5px; /* 边框圆角 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .pull-right {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
<h1>申泽智能讲师文化活动抽奖环节</h1>
|
|
|
|
|
|
+ <div class="custom-select pull-right">
|
|
|
+ <select name="selectSection" id="departmentSelect">
|
|
|
+ <option value="">选择部门</option>
|
|
|
+ <option value="RD">研发&综合中心</option>
|
|
|
+ <option value="PD">生产部</option>
|
|
|
+ <option value="MD">营销部</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <br />
|
|
|
<div>
|
|
|
<label for="namesInput">请输入观众人名单：</label>
|
|
|
<textarea
|
|
|
id="namesInput"
|
|
|
rows="4"
|
|
|
- placeholder="请使用英文逗号,分隔多个人名"
|
|
|
+ placeholder="请使用逗号分隔多个人名"
|
|
|
></textarea>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label for="excludedNamesInput"
|
|
|
- >请输入被排除的主持人和讲师：</label
|
|
|
- >
|
|
|
+ <label for="excludedNamesInput">请输入被排除的主持人和讲师：</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
id="excludedNamesInput"
|
|
|
- placeholder="请使用英文逗号,分隔多个人名"
|
|
|
+ placeholder="请使用逗号分隔多个人名"
|
|
|
/>
|
|
|
</div>
|
|
|
- <button onclick="selectRandomName()">抽取随机人名</button>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="submitBtn" onclick="selectRandomName()">抽取随机人名</button>
|
|
|
<div class="result-container">
|
|
|
<h2>本次幸运观众是：</h2>
|
|
|
<p id="randomName"></p>
|
|
|
@@ -136,24 +163,59 @@
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- function selectRandomName() {
|
|
|
- var namesInput = document.getElementById("namesInput").value;
|
|
|
- var excludedNamesInput =
|
|
|
- document.getElementById("excludedNamesInput").value;
|
|
|
+ // 只允许输入中英文字符，空格
|
|
|
+ var inputPattern = /^[\u4e00-\u9fa5a-zA-Z\s,，]+$|^$/;
|
|
|
|
|
|
- var namesArray = namesInput.split(",").map((name) => name.trim());
|
|
|
- var excludedNamesArray = excludedNamesInput.split(",").map((name) => name.trim());
|
|
|
+ document
|
|
|
+ .getElementById("submitBtn")
|
|
|
+ .addEventListener("click", function () {
|
|
|
+ // 获取用户输入的人名单
|
|
|
+ var namesInput = document.getElementById("namesInput").value;
|
|
|
+ var excludedNamesInput =
|
|
|
+ document.getElementById("excludedNamesInput").value;
|
|
|
|
|
|
+ if (
|
|
|
+ !inputPattern.test(namesInput) ||
|
|
|
+ !inputPattern.test(excludedNamesInput)
|
|
|
+ ) {
|
|
|
+ alert("非法字符，请重新输入！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将中文逗号全局替换成英文逗号
|
|
|
+ namesInput = namesInput.replace(/，/g, ",");
|
|
|
+ excludedNamesInput = excludedNamesInput.replace(/，/g, ",");
|
|
|
+
|
|
|
+ var namesArray = namesInput.split(",").map((name) => name.trim());
|
|
|
+ var excludedNamesArray = excludedNamesInput
|
|
|
+ .split(",")
|
|
|
+ .map((name) => name.trim());
|
|
|
+
|
|
|
+ selectRandomName(namesArray, excludedNamesArray);
|
|
|
+ });
|
|
|
+
|
|
|
+ document
|
|
|
+ .getElementById("departmentSelect")
|
|
|
+ .addEventListener("change", function () {
|
|
|
+ var selectDepartment = this.value;
|
|
|
+ var namesInput = document.getElementById("namesInput");
|
|
|
+
|
|
|
+ if (selectDepartment === "RD") {
|
|
|
+ namesInput.value = "张凤兰, 王巧贤, 阮珊珊, 谢焕婷, 李婕妤, 李广, 高旭坤, 刘云, 邓远锋, 吴宗澍, 曾文龙, 黄彦, 刘银华, 肖夜华, 严成发, 文孔燊, 洪序滨, 江锦文, 张乐瑶, 张镜明, 陈智雄, 陈珍旭, 王莞琳, 王和富, 王则钰, 王杰";
|
|
|
+ } else if (selectDepartment === "PD") {
|
|
|
+ namesInput.value = "张三, 李四, 王五";
|
|
|
+ } else if (selectDepartment === "MD") {
|
|
|
+ namesInput.value = "a, b, c";
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function selectRandomName(namesArray, excludedNamesArray) {
|
|
|
var filteredNames = filterNames(namesArray, excludedNamesArray);
|
|
|
if (filteredNames.length === 0) {
|
|
|
document.getElementById("randomName").innerHTML = "没有可抽取的人名";
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- // var randomIndex = Math.floor(Math.random() * filteredNames.length);
|
|
|
- // var randomName = filteredNames[randomIndex];
|
|
|
- // document.getElementById("randomName").innerHTML = randomName.trim();
|
|
|
-
|
|
|
var luckyPerson =
|
|
|
namesArray[Math.floor(Math.random() * namesArray.length)];
|
|
|
while (excludedNamesArray.includes(luckyPerson)) {
|
