帮我写一个课堂学号抽奖的html代码
时间: 2023-08-06 13:03:22 浏览: 89
好的,以下是一个简单的 HTML 代码,可以实现课堂学号抽奖的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课堂学号抽奖</title>
</head>
<body>
<h1>课堂学号抽奖</h1>
<p>请输入每位学生的姓名和学号:</p>
<form>
<label>姓名:<input type="text" name="name"></label><br>
<label>学号:<input type="text" name="number"></label><br>
<button type="button" onclick="addStudent()">添加</button>
</form>
<hr>
<p>已添加的学生:</p>
<ul id="studentList"></ul>
<hr>
<button type="button" onclick="startLottery()">开始抽奖</button>
<p id="result"></p>
<script>
var students = [];
function addStudent() {
var name = document.getElementsByName("name")[0].value;
var number = document.getElementsByName("number")[0].value;
students.push({name: name, number: number});
document.getElementsByName("name")[0].value = "";
document.getElementsByName("number")[0].value = "";
updateStudentList();
}
function updateStudentList() {
var studentList = document.getElementById("studentList");
studentList.innerHTML = "";
for (var i = 0; i < students.length; i++) {
var student = students[i];
var li = document.createElement("li");
li.innerText = student.name + "(" + student.number + ")";
studentList.appendChild(li);
}
}
function startLottery() {
if (students.length == 0) {
alert("请先添加学生!");
return;
}
var index = Math.floor(Math.random() * students.length);
var winner = students[index];
var result = document.getElementById("result");
result.innerText = "恭喜 " + winner.name + "(" + winner.number + ")中奖!";
}
</script>
</body>
</html>
```
具体来说,这段代码使用了 HTML 表单元素和 JavaScript 脚本,实现了以下功能:
- 用户可以在表单中输入每位学生的姓名和学号,并通过按钮添加到学生列表中;
- 学生列表实时显示已添加的学生姓名和学号;
- 用户可以点击按钮开始抽奖,随机选择一位学生作为中奖者,并在页面上显示其姓名和学号。
你可以将这段代码保存为 `.html` 文件,并在浏览器中打开,即可使用。
阅读全文