用 HTML、JS、CSS3 和 Vue 实现不重复的人员名单抽取（附代码与注意点）

明白了，你需要一个基于 HTML、JS、CSS3 和 Vue.js 的应用，用于从多个组中抽取人员名单，确保同一个组中的人员不会被重复抽中。下面是一个简单的示例代码： 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"> </head> <body> <div id="app"> <h1>人员名单抽取</h1> <button @click="drawNames">抽取</button> <ul> <li v-for="(name, index) in drawnNames" :key="index">{{ name }}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="app.js"></script> </body> </html> ``` CSS (styles.css) ```css body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #app { text-align: center; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #007bff; color: #fff; } ul { list-style-type: none; padding: 0; } li { margin: 5px 0; } ``` JavaScript (app.js) ```javascript new Vue({ el: '#app', data: { groups: [ { name: '组1', members: ['张三', '李四', '王五'] }, { name: '组2', members: ['赵六', '钱七', '孙八'] }, { name: '周九', '成员': ['吴十', '郑十一', '冯十二'] } ], drawnNames: [] }, methods: { drawNames() { this.drawnNames = []; this.groups.forEach(group => { const availableMembers = group.members.filter(member => !this.drawnNames.includes(member)); if (availableMembers.length > 0) { const randomIndex = Math.floor(Math.random() * availableMembers.length); this.drawnNames.push(availableMembers[randomIndex]); } }); } } }); ``` 额外需要注意的逻辑点： 1. 数据验证：在抽取前，确保每个组中至少有一个成员没有被抽中。如果某个组的所有成员都已经被抽中，可以跳过该组或提示用户。 2. 错误处理：添加错误处理机制，例如当所有组的成员都被抽完时，显示一个友好的提示信息。 3. 动态更新：如果需要实时更新组成员列表，可以在 Vue 组件中添加相应的输入框和按钮，允许用户动态添加或删除成员。希望这个示例对你有帮助！如果有任何问题或需要进一步的功能扩展，随时告诉我。 ######[AI写代码神器 | 767点数解答 | 2024-12-12 16:45:18]

服务商

更多选项

快捷项

自定义