用js写一段编程,现有5名同学,包含姓名和性别,信息分别为:刘德华,男;张学友,男,王菲,女,周润发,男,梅艳芳,女,现编写一个随机点名程序,如图所示,当点击“随机点名”按钮后,第一个按钮随机显示姓名。
时间: 2024-06-09 11:07:49 浏览: 59
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机点名程序</title>
</head>
<body>
<h1>随机点名程序</h1>
<p>当前被选中的同学是:<span id="result"></span></p>
<button onclick="randomPick()">随机点名</button>
<script>
// 定义学生信息数组
var students = [
{ name: '刘德华', gender: '男' },
{ name: '张学友', gender: '男' },
{ name: '王菲', gender: '女' },
{ name: '周润发', gender: '男' },
{ name: '梅艳芳', gender: '女' }
];
// 随机点名函数
function randomPick() {
// 随机生成一个0~4的整数作为数组下标
var index = Math.floor(Math.random() * 5);
// 获取选中的学生信息
var student = students[index];
// 更新页面显示
document.getElementById("result").innerHTML = student.name;
}
</script>
</body>
</html>
```
在代码中,定义了一个包含5名学生信息的数组`students`,每个学生信息包含`name`和`gender`两个属性。定义了一个`randomPick`函数,用于随机点名。在函数中,使用`Math.random()`函数生成一个0~1之间的随机数,乘以5并向下取整,得到一个0~4的整数作为数组下标,从而随机选取一个学生。最后,将选中的学生姓名显示在页面上。在HTML代码中,定义了一个用于显示选中学生姓名的`<span>`元素,并在“随机点名”按钮上绑定了`randomPick`函数。
阅读全文