index_now.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  #box {
		    width: 30%;
		    height: 200px;
		    background-color: rgb(233, 248, 214);
		    border: 1px solid rgb(130, 216, 18);
		    font-size: 40px;
		    font-weight: 600;
		    font-family: Arial, Helvetica, sans-serif;
		    line-height: 200px;
		    text-align: center;
		    margin: 25px auto;
		    border-radius: 10px;
		  }
		  span {
		    display: block;
		    width: 30%;
		    height: 44px;
		    line-height: 44px;
		    background-color: rgb(6, 158, 64);
		    border-radius: 10px;
		    color: #fff;
		    text-align: center;
		    margin: 0 auto;
		    font-size: 18px;
		    font-family: 华文细黑;
		  }
		  span:hover {
		    background-color: rgb(4, 190, 76);
		  }
		</style>
		
	</head>
	
	<body>
		
			
		  <div id="box">随机点名</div>
		  <span id="span">开始</span>
		
	</body>
	<script>
	  // var arr = ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",
	  //   "杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠", "诸葛亮",
	  //   "哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京",
	  //   "娜可露露", "不知火舞", "张良", "花木兰", "兰陵王", "王昭君", "韩信", "刘邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蝉", "关羽", "老夫子",
	  //   "武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "李白", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "扁鹊",
	  //   "孙膑", "钟无艳", "阿轲", "高渐离", "刘禅", "庄周", "鲁班七号", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇"
	  // ]
	  var arr=[
		  "滕青红",
		  "文家琪",
		  "谢坤廷",
		  "徐朝吉",
		  "于成勇",
		  "张文海",
		  "周天雨",
		  "陈磊",
		  "邓隆杰",
		  "邓相芝",
		  "何宝凤",
		  "黄江柳",
		  "雷磊",
		  "李娅",
		  "刘德辉",
		  "潘勋",
		  "漆钟民",
		  "唐勇杰",
		  "涂水兰",
		  "王飞",
		  "王元龙",
		  "向初阳",
		  "肖子意",
		  "晏宇豪",
		  "张川杰",
		  "张在发",
		  "朱杰华"
	  ]
	  var box = document.getElementById("box");
	  var span = document.getElementById("span");//获取元素
	  var state = 0;//定义状态，开始和结束
	  var t;
	  span.onclick = function () {
	    if (state == 0) {
	      //如果是0即开始随机，变为1时结束，不是0时执行else
	      clearInterval(t);
	      t = setInterval(function () {
	        // console.log(1);
	        var sj = Math.round(Math.random() * (arr.length - 1));
	        console.log(arr[sj]);
	        box.innerHTML = arr[sj];
	      }, 3)
	      span.innerHTML = "结束"//更改按钮的内容
	      state=1;
	    }else{
	      state=0;
	      clearInterval(t);
	      span.innerHTML = "开始"
	    }
	  }
	</script>
</html>