首页做HBuilder做随机点名系统

做HBuilder做随机点名系统

时间: 2024-12-16 15:26:36 浏览: 5

在HBuilder（一款基于WebIDE的前端开发工具）中，创建随机点名系统可以采用类似JavaScript的方式，但可能会通过构建HTML、CSS和JavaScript相结合的方式来实现。以下是一个基本步骤： 1. **HTML结构**: 创建一个简单的页面布局，包括输入框（添加新成员）、展示结果的部分以及一个触发点名的按钮。 ```html <!DOCTYPE html> <html lang="zh"> <head> ... </head> <body> ... <button id="selectButton">开始点名</button> <div id="result"></div> </body> </html> ``` 2. **JavaScript部分**: 使用HBuilder的JS编写功能，如收集名字、存储数据、随机选择并显示。 ```javascript const namesInput = document.querySelector('#input'); const selectButton = document.querySelector('#selectButton'); const resultDisplay = document.querySelector('#result'); selectButton.addEventListener('click', () => { const newName = namesInput.value; if (newName) { // 添加新的名字 namesArray.push(newName); namesInput.value = ''; } const selectedName = chooseRandom(); resultDisplay.textContent = `本次点名是：${selectedName}`; }); function chooseRandom() { const namesArray = ['张三', '李四', '王五']; // 或者从输入框获取 return namesArray[Math.floor(Math.random() * namesArray.length)]; } ``` 这个简单版本假设你已经有个初始的名字列表。当点击按钮时，它会添加新的输入值到数组（如果有的话），然后随机选一个人名显示出来。

阅读全文