feat: "字体显示，抽奖延迟"

index.html

@@ -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) {