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. 用户体验：添加更多的提示信息和友好的用户交互，如抽取完毕后的提示和重新开始的功能。 [2024-12-12 16:55:01 | AI写代码神器 | 1179点数解答]

服务商

更多选项

快捷项

直通车

html5、js、css3、vue3实现人员抽取小程序，界面美观、布局合理，可以自定义名单，同一个组中的人员不被重复抽中，每次抽取均为不同组人员，直至所有组人员均被抽取一次后方能再次抽中已抽过组中的人员