本文详细介绍如何利用 JavaScript 的 Math.random 函数结合 setTimeout 实现课堂随机点名效果。通过动态切换显示文字与按钮状态，演示了如何生成随机索引并实时更新页面内容，适用于教学互动场景。
JavaScript 课堂随机点名功能实现
如何利用 JavaScript 中的 random 函数来实现课堂随机点名功能
初始界面效果如下所示
点击“开始点名”按钮后，上方显示的文字会快速切换为姓名，同时按钮文字变为“停止点名”，具体效果如下
再次点击“停止点名”后，上方姓名停止滚动并固定显示，按钮文字恢复为“开始点名”，例如显示：李四同学回答老师问题
具体实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d2{cursor:pointer;}/*让鼠标移到开始点名的时候变成手型*/
</style>
</head>
<body>
<div id="d1">亲，准备好了吗？</div>
<div id="d2" onclick="fun()">开始点名</div><!--触发事件句柄onlick，调用fun函数-->
<script>
var mytime=null;
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
function fun()
{if(mytime==null)
{d2.innerHTML="停止点名";
show();
}
else {
clearTimeout(mytime);
d2.innerHTML="开始点名";
mytime=null;
}
}
function show()
{var s=["张三","李四","王五","王二","小二"];
var name=Math.floor(Math.random()*10%s.length);//让name在下标0-4之间取得
d1.innerHTML=s[name];
mytime=setTimeout("show()",1);
}
</script>
</body>
</html>注意：random 是 Math 对象的内置函数，因此调用时必须写成 Math.random()
至此，关于 JavaScript 如何使用函数 random 来实现课堂随机点名方法的详细介绍已完成，更多相关 javascript 使用函数 random 来实现课堂随机点名方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！