|
@@ -12,24 +12,27 @@
|
|
|
font-family: Arial, sans-serif;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
#container {
|
|
|
width: auto;
|
|
|
- max-width: 1000px;
|
|
|
+ height: 580px;
|
|
|
+ max-width: 1200px;
|
|
|
margin: 50px auto;
|
|
|
padding: 20px;
|
|
|
- background-color: #fff;
|
|
|
+ /* background-color: #f2d1c3; */
|
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 5px;
|
|
|
- background-image: url("./back.png");
|
|
|
+ background-image: url("./back.jpg");
|
|
|
background-size: cover;
|
|
|
background-position: top center;
|
|
|
background-repeat: no-repeat;
|
|
|
+ border-radius: 8px; /* 边框圆角 */
|
|
|
}
|
|
|
h1 {
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
- color: #0e0d0d;
|
|
|
+ color: #fcfcfc;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
label {
|
|
@@ -49,12 +52,13 @@
|
|
|
input[type="text"] {
|
|
|
width: 100%;
|
|
|
/* padding: 10px; */
|
|
|
- border: 2px solid #f9ddcd8a;
|
|
|
+ border: 3px solid #94e07fa8;
|
|
|
border-radius: 5px; /* 边框圆角 */
|
|
|
resize: none;
|
|
|
margin-left: -4px;
|
|
|
margin-right: -4px;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-style: bold;
|
|
|
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
}
|
|
|
input:focus,
|
|
@@ -64,7 +68,7 @@
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
- background-color: #545be7;
|
|
|
+ background-color: #e79b54;
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
padding: 10px 20px;
|
|
@@ -76,7 +80,7 @@
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
button:hover {
|
|
|
- background-color: #2630e3;
|
|
|
+ background-color: #e8750a;
|
|
|
}
|
|
|
.result-container {
|
|
|
margin-top: 20px;
|
|
@@ -87,9 +91,9 @@
|
|
|
color: #333;
|
|
|
}
|
|
|
.result-container p {
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 25px;
|
|
|
font-weight: bold;
|
|
|
- color: #014dff;
|
|
|
+ color: #ff0101;
|
|
|
animation: blink 1.5s infinite;
|
|
|
}
|
|
|
@keyframes blink {
|
|
@@ -113,7 +117,7 @@
|
|
|
.custom-select select {
|
|
|
width: 100%;
|
|
|
padding: 8px;
|
|
|
- border: 2px solid #94e07fa8;
|
|
|
+ border: 2px solid #a77fe0a8;
|
|
|
border-radius: 5px; /* 边框圆角 */
|
|
|
}
|
|
|
|
|
@@ -201,7 +205,8 @@
|
|
|
var namesInput = document.getElementById("namesInput");
|
|
|
|
|
|
if (selectDepartment === "RD") {
|
|
|
- namesInput.value = "张凤兰, 王巧贤, 阮珊珊, 谢焕婷, 李婕妤, 李广, 高旭坤, 刘云, 邓远锋, 吴宗澍, 曾文龙, 黄彦, 刘银华, 肖夜华, 严成发, 文孔燊, 洪序滨, 江锦文, 张乐瑶, 张镜明, 陈智雄, 陈珍旭, 王莞琳, 王和富, 王则钰, 王杰";
|
|
|
+ namesInput.value =
|
|
|
+ "张凤兰, 王巧贤, 阮珊珊, 谢焕婷, 李婕妤, 李广, 高旭坤, 刘云, 邓远锋, 吴宗澍, 曾文龙, 黄彦, 刘银华, 肖夜华, 严成发, 文孔燊, 洪序滨, 江锦文, 张乐瑶, 张镜明, 陈智雄, 陈珍旭, 王莞琳, 王和富, 王则钰, 王杰";
|
|
|
} else if (selectDepartment === "PD") {
|
|
|
namesInput.value = "张三, 李四, 王五";
|
|
|
} else if (selectDepartment === "MD") {
|
|
@@ -216,14 +221,23 @@
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- var luckyPerson =
|
|
|
- namesArray[Math.floor(Math.random() * namesArray.length)];
|
|
|
- while (excludedNamesArray.includes(luckyPerson)) {
|
|
|
- luckyPerson =
|
|
|
+ var interval = setInterval(function () {
|
|
|
+ var randomIndex = Math.floor(Math.random() * filteredNames.length);
|
|
|
+ document.getElementById("randomName").innerHTML =
|
|
|
+ "是(¬‿¬): " + filteredNames[randomIndex] + " ?";
|
|
|
+ }, 400);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(interval);
|
|
|
+ var luckyPerson =
|
|
|
namesArray[Math.floor(Math.random() * namesArray.length)];
|
|
|
- }
|
|
|
- document.getElementById("randomName").innerHTML =
|
|
|
- "恭喜 " + luckyPerson + " 中奖!";
|
|
|
+ while (excludedNamesArray.includes(luckyPerson)) {
|
|
|
+ luckyPerson =
|
|
|
+ namesArray[Math.floor(Math.random() * namesArray.length)];
|
|
|
+ }
|
|
|
+ document.getElementById("randomName").innerHTML =
|
|
|
+ "恭喜 " + luckyPerson + " 中奖o(^▽^)o";
|
|
|
+ }, 4000);
|
|
|
}
|
|
|
|
|
|
function filterNames(namesArray, excludedNamesArray) {
|