index.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>申泽智能科技</title>
  7. <link rel="icon" type="image/x-icon" href="favicon.ico" />
  8. <style>
  9. body {
  10. text-align: center;
  11. background-color: #f2f2f2;
  12. font-family: Arial, sans-serif;
  13. margin: 0;
  14. padding: 0;
  15. }
  16. #container {
  17. width: auto;
  18. max-width: 1000px;
  19. margin: 50px auto;
  20. padding: 20px;
  21. background-color: #fff;
  22. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  23. border-radius: 5px;
  24. background-image: url("./back.png");
  25. background-size: cover;
  26. background-position: top center;
  27. background-repeat: no-repeat;
  28. }
  29. h1 {
  30. font-size: 24px;
  31. font-weight: bold;
  32. color: #0e0d0d;
  33. margin-bottom: 30px;
  34. }
  35. label {
  36. display: block;
  37. text-align: left;
  38. font-weight: bold;
  39. margin-bottom: 5px;
  40. margin-left: 10px;
  41. }
  42. textarea {
  43. height: 150px;
  44. }
  45. input {
  46. height: 30px;
  47. }
  48. textarea,
  49. input[type="text"] {
  50. width: 100%;
  51. /* padding: 10px; */
  52. border: 2px solid #f9ddcd8a;
  53. border-radius: 5px; /* 边框圆角 */
  54. resize: none;
  55. margin-left: -4px;
  56. margin-right: -4px;
  57. font-size: 16px;
  58. font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  59. }
  60. input:focus,
  61. textarea:focus {
  62. outline: none;
  63. border: 3px solid #e053018a;
  64. }
  65. button {
  66. background-color: #545be7;
  67. color: #fff;
  68. border: none;
  69. padding: 10px 20px;
  70. font-size: 16px;
  71. font-weight: bold;
  72. border-radius: 3px;
  73. cursor: pointer;
  74. transition: background-color 0.3s ease;
  75. margin-top: 10px;
  76. }
  77. button:hover {
  78. background-color: #2630e3;
  79. }
  80. .result-container {
  81. margin-top: 20px;
  82. }
  83. .result-container h2 {
  84. font-size: 18px;
  85. margin-bottom: 10px;
  86. color: #333;
  87. }
  88. .result-container p {
  89. font-size: 24px;
  90. font-weight: bold;
  91. color: #014dff;
  92. animation: blink 1.5s infinite;
  93. }
  94. @keyframes blink {
  95. 0% {
  96. opacity: 1;
  97. }
  98. 50% {
  99. opacity: 0;
  100. }
  101. 100% {
  102. opacity: 1;
  103. }
  104. }
  105. .custom-select {
  106. position: relative;
  107. width: 130px;
  108. margin: 5px auto;
  109. }
  110. .custom-select select {
  111. width: 100%;
  112. padding: 8px;
  113. border: 2px solid #94e07fa8;
  114. border-radius: 5px; /* 边框圆角 */
  115. }
  116. .pull-right {
  117. float: right;
  118. }
  119. </style>
  120. </head>
  121. <body>
  122. <div id="container">
  123. <h1>申泽智能讲师文化活动抽奖环节</h1>
  124. <div class="custom-select pull-right">
  125. <select name="selectSection" id="departmentSelect">
  126. <option value="">选择部门</option>
  127. <option value="RD">研发&综合中心</option>
  128. <option value="PD">生产部</option>
  129. <option value="MD">营销部</option>
  130. </select>
  131. </div>
  132. <br />
  133. <div>
  134. <label for="namesInput">请输入观众人名单:</label>
  135. <textarea
  136. id="namesInput"
  137. rows="4"
  138. placeholder="请使用逗号分隔多个人名"
  139. ></textarea>
  140. </div>
  141. <div>
  142. <label for="excludedNamesInput">请输入被排除的主持人和讲师:</label>
  143. <input
  144. type="text"
  145. id="excludedNamesInput"
  146. placeholder="请使用逗号分隔多个人名"
  147. />
  148. </div>
  149. <br />
  150. <br />
  151. <button id="submitBtn" onclick="selectRandomName()">抽取随机人名</button>
  152. <div class="result-container">
  153. <h2>本次幸运观众是:</h2>
  154. <p id="randomName"></p>
  155. </div>
  156. </div>
  157. <script>
  158. // 只允许输入中英文字符,空格
  159. var inputPattern = /^[\u4e00-\u9fa5a-zA-Z\s,,]+$|^$/;
  160. document
  161. .getElementById("submitBtn")
  162. .addEventListener("click", function () {
  163. // 获取用户输入的人名单
  164. var namesInput = document.getElementById("namesInput").value;
  165. var excludedNamesInput =
  166. document.getElementById("excludedNamesInput").value;
  167. if (
  168. !inputPattern.test(namesInput) ||
  169. !inputPattern.test(excludedNamesInput)
  170. ) {
  171. alert("非法字符,请重新输入!");
  172. return;
  173. }
  174. // 将中文逗号全局替换成英文逗号
  175. namesInput = namesInput.replace(/,/g, ",");
  176. excludedNamesInput = excludedNamesInput.replace(/,/g, ",");
  177. var namesArray = namesInput.split(",").map((name) => name.trim());
  178. var excludedNamesArray = excludedNamesInput
  179. .split(",")
  180. .map((name) => name.trim());
  181. selectRandomName(namesArray, excludedNamesArray);
  182. });
  183. document
  184. .getElementById("departmentSelect")
  185. .addEventListener("change", function () {
  186. var selectDepartment = this.value;
  187. var namesInput = document.getElementById("namesInput");
  188. if (selectDepartment === "RD") {
  189. namesInput.value = "张凤兰, 王巧贤, 阮珊珊, 谢焕婷, 李婕妤, 李广, 高旭坤, 刘云, 邓远锋, 吴宗澍, 曾文龙, 黄彦, 刘银华, 肖夜华, 严成发, 文孔燊, 洪序滨, 江锦文, 张乐瑶, 张镜明, 陈智雄, 陈珍旭, 王莞琳, 王和富, 王则钰, 王杰";
  190. } else if (selectDepartment === "PD") {
  191. namesInput.value = "张三, 李四, 王五";
  192. } else if (selectDepartment === "MD") {
  193. namesInput.value = "a, b, c";
  194. }
  195. });
  196. function selectRandomName(namesArray, excludedNamesArray) {
  197. var filteredNames = filterNames(namesArray, excludedNamesArray);
  198. if (filteredNames.length === 0) {
  199. document.getElementById("randomName").innerHTML = "没有可抽取的人名";
  200. return;
  201. }
  202. var luckyPerson =
  203. namesArray[Math.floor(Math.random() * namesArray.length)];
  204. while (excludedNamesArray.includes(luckyPerson)) {
  205. luckyPerson =
  206. namesArray[Math.floor(Math.random() * namesArray.length)];
  207. }
  208. document.getElementById("randomName").innerHTML =
  209. "恭喜 " + luckyPerson + " 中奖!";
  210. }
  211. function filterNames(namesArray, excludedNamesArray) {
  212. var filteredNames = [];
  213. for (var i = 0; i < namesArray.length; i++) {
  214. var name = namesArray[i].trim();
  215. if (name !== "" && !excludedNamesArray.includes(name)) {
  216. filteredNames.push(name);
  217. }
  218. }
  219. return filteredNames;
  220. }
  221. </script>
  222. </body>
  223. </html>