HTML、JS、CSS、Vue、jQuery 联手：实现无重复组人员名单抽取！

以下是一个使用 HTML、JavaScript、CSS、Vue 和 jQuery 实现人员名单抽取，且同一个组中的人员不被重复抽中的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>人员名单抽取</title> <style> /* 这里可以添加您的 CSS 样式 */ </style> </head> <body> <div id="app"> <button id="drawBtn">抽取</button> <ul id="resultList"></ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/vue@3"></script> <script> // 定义人员数据 const people = [ { name: '张三', group: 'A' }, { name: '李四', group: 'A' }, { name: '王五', group: 'B' }, { name: '赵六', group: 'B' }, ]; // 定义 Vue 实例 const app = Vue.createApp({ data() { return { result: [], }; }, methods: { drawPeople() { // 用于存储已经抽取过的组 const drawnGroups = []; // 随机抽取人员 const randomPerson = people[Math.floor(Math.random() * people.length)]; // 如果该人员所在组未被抽取过，则添加到结果中 if (!drawnGroups.includes(randomPerson.group)) { this.result.push(randomPerson.name); drawnGroups.push(randomPerson.group); } }, }, }); // 挂载 Vue 实例 app.mount('#app'); // 给抽取按钮添加点击事件 $('#drawBtn').click(() => { app.drawPeople(); $('#resultList').empty(); app.result.forEach(person => { $('#resultList').append(`<li>${person}</li>`); }); }); </script> </body> </html> ``` 请问您对于这个抽取的逻辑有具体的数量要求吗？是否有特定的展示格式需求？抽取后是否需要进行其他操作？ ######[AI写代码神器 | 575点数解答 | 2024-12-12 16:44:17]

服务商

更多选项

快捷项

自定义