HTML5、JS、CSS3、Vue3联手打造人员抽取小程序：杜绝重复抽取，体验绝佳！

好的，下面是一个使用 HTML5、CSS3、JavaScript 和 Vue 3 实现的人员抽取小程序。这个程序允许用户自定义名单，确保同一个组中的人员不会被重复抽中，直到所有组的人员都被抽取一次。 HTML (index.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>人员抽取小程序</title> <link rel="stylesheet" href="styles.css"> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <h1>人员抽取小程序</h1> <div class="input-section"> <label for="groups">请输入组名和人员（格式：组名: 人员1, 人员2, ...）</label> <textarea v-model="groupsInput" rows="10" placeholder="例如：组1: 张三, 李四\n组2: 王五, 赵六"></textarea> <button @click="parseGroups">解析名单</button> </div> <div v-if="groups.length > 0" class="result-section"> <h2>已解析的组和人员</h2> <ul> <li v-for="(group, index) in groups" :key="index">{{ group.name }}: {{ group.members.join(', ') }}</li> </ul> <button @click="drawPerson">抽取人员</button> <p v-if="selectedPerson">抽取结果：{{ selectedPerson }}</p> </div> </div> <script src="app.js"></script> </body> </html> ``` CSS (styles.css) ```css body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } #app { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1, h2 { text-align: center; } .input-section, .result-section { margin-bottom: 20px; } textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: none; } button { display: block; width: 100%; padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #0056b3; } ul { list-style-type: none; padding: 0; } li { margin: 5px 0; } ``` JavaScript (app.js) ```javascript const app = Vue.createApp({ data() { return { groupsInput: '', groups: [], selectedPerson: null, drawnMembers: [] }; }, methods: { parseGroups() { this.groups = []; const lines = this.groupsInput.trim().split('\n'); lines.forEach(line => { const [groupName, members] = line.split(':'); if (groupName && members) { this.groups.push({ name: groupName.trim(), members: members.trim().split(',').map(member => member.trim()) }); } }); this.drawnMembers = new Array(this.groups.length).fill(null); }, drawPerson() { let availableGroups = this.groups.filter((group, index) => !this.drawnMembers[index]); if (availableGroups.length === 0) { alert('所有组的人员都已抽取完毕，重新开始。'); this.drawnMembers = new Array(this.groups.length).fill(null); availableGroups = this.groups; } const randomGroupIndex = Math.floor(Math.random() * availableGroups.length); const randomGroup = availableGroups[randomGroupIndex]; const availableMembers = randomGroup.members.filter(member => !this.drawnMembers.includes(member)); if (availableMembers.length === 0) { alert(`组 ${randomGroup.name} 的人员都已抽取完毕，重新开始。`); this.drawnMembers[randomGroupIndex] = null; return; } const randomMemberIndex = Math.floor(Math.random() * availableMembers.length); const selectedMember = availableMembers[randomMemberIndex]; this.selectedPerson = `${randomGroup.name}: ${selectedMember}`; this.drawnMembers[randomGroupIndex] = selectedMember; } } }); app.mount('#app'); ``` 需要注意的逻辑点 1. 解析名单时的格式检查：确保用户输入的格式正确，避免因格式错误导致解析失败。 2. 抽取逻辑的优化：确保每个组的人员在所有组的人员都被抽取一次之前不会被重复抽取。 3. 用户体验：添加更多的提示信息和友好的用户交互，如抽取完毕后的提示和重新开始的功能。 ######[AI写代码神器 | 1179点数解答 | 2024-12-12 16:55:01]

服务商

更多选项

快捷项

自定义