<!DOCTYPE html>
<html>
<head>
<title>随机点名 | 随机抽奖效果</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f1f1f1;
}
.name-container {
text-align: center;
font-size: 24px;
color: #333;
}
.button-container {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="name-container">
<p id="studentName"></p>
</div>
<div class="button-container">
<button id="startButton">开始</button>
<button id="stopButton">停止</button>
</div>
<script>
var timer;
var students = ["张三", "李四", "王五", "赵六", "孙七"];
function getRandomStudent() {
var index = Math.floor(Math.random() * students.length);
return students[index];
}
function startCalling() {
timer = setInterval(function() {
var studentName = getRandomStudent();
document.getElementById("studentName").textContent = studentName;
}, 100); // 间隔时间可以根据需要调整
}
function stopCalling() {
clearInterval(timer);
}
document.getElementById("startButton").addEventListener("click", startCalling);
document.getElementById("stopButton").addEventListener("click", stopCalling);
</script>
</body>
</html>这段代码实现了一个随机点名的效果。用户点击"开始"按钮后，会无限循环随机显示学生名字。点击"停止"按钮后，会停止显示学生名字。这个简单的示例展示了如何使用JavaScript的定时器功能和随机函数来实现有趣的交互效果。