JavaScript实现随机点名

最新推荐文章于 2023-08-19 15:04:38 发布

路边小吕

最新推荐文章于 2023-08-19 15:04:38 发布

阅读量413

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qiandaiyangzi/article/details/127972782

版权

演示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>随机点名</title>
		<link rel="stylesheet" href="css/callName.css"/>
	</head>
	<body>
		<form>
		    <div align="center">
		    <input type="button" value="开始滚动" onclick="start()" class="start"/>
		    <input type="button" value="停止滚动" onclick="stop()" class="start" id="btn"/>
		    <hr color="blue">
		    <br>
		    <div id="show" align="center">随机点名区域</div>
		  </div>
       </form>
	   <script>
	       //获取标签
	       var divNode = document.getElementById("show");
	       //存储姓名
	       var students = ["露娜","雅典纳","小乔","孙尚香","再来一次","花木兰",
	                       "拉克丝","马尔扎哈","努努","卡特琳娜","蒙多医生","库奇",
	                       "张三","妲己","貂蝉","吕布","李白","荆轲",
	                       "八戒","王昭君","上官玩儿","米莱狄","伽罗","公孙离","特兰德尔",
						   "再来一次","木木","辛吉德","加里奥","玲娜贝尔","唐老鸭","Tom"];
	       //定义随机姓名变量
	       var randomName;
	       var arr;
	       //点击开始滚动事件
	       function start(){
	           //定时器
	           arr = setInterval(function(){
	               //随机姓名
	               randomName = Math.floor(Math.random()*students.length);
	               //输出随机姓名
	               var nums = students[randomName];
	               divNode.innerHTML = nums;
	           },50)
	       }
	       //停止滚动事件
	       function stop() {
	           //清除定时器
	           clearInterval(arr);
	       }
	   </script>
	</body>
</html>