web点名录

最新推荐文章于 2023-06-20 15:20:09 发布

小红帽与灰太狼

最新推荐文章于 2023-06-20 15:20:09 发布

阅读量124

点赞数

分类专栏： JS 文章标签： web点名录 jQuery点名

本文链接：https://blog.csdn.net/weixin_42277719/article/details/103412110

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

web点名录

在这里插入图片描述


```javascript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点名录</title>
		<style type="text/css">
			h2{
				color: red;

				font-family: "楷体";
				font-size: 30px;
			}
			#mydiv{
				margin: 0 auto;
				width: 600px;
				height: 240px;
				border: 1px solid firebrick;
				text-align: center;
				font-size: 130px;
			}
			#mybut{
				display: block;
				margin: 20px auto;
				font-size: 18px;
				background-color: deepskyblue;
				color: white;
			
			}
		</style>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<h1 align="center">B160401班开始点名</h1>
		<h2 align="center">被点到姓名的是</h2>
		<div id="mydiv">
			
		</div>
		<div id="btdiv">
			<button id="mybut" onclick="start()">开始</button>
		</div>
		
		<script type="text/javascript">
			
			var names=["莲","高婷","吴美","周玲","高香","郝军","慧","琪","龙祁","李伟",
			"王珍","王乾","王森","陈明","陈星","陈辉","王召","祝云","胡涛","浩","欧辉","张琪","宋朝",
			"郑峰","田孝","张浩","王逸","覃恩","董庚","高阳","瑞","凌乔"];
			
			var flag=0;
			
			function start(){
				
				var ranNum=Math.floor(Math.random()*32);			
				var divNum=names[ranNum];
				
				$('#mydiv').html(divNum);			    
				$('#mybut').html('停止').attr('onclick','stopbut()');
				flag=setTimeout(start,80);
			   
			}
			
			
			
			function stopbut(){
				clearTimeout(flag);
				var n=$('#mydiv').html();			
				names.splice(names.indexOf(n),1);
				$('#mybut').html('开始').attr('onclick','start()');
				
				
			}
			
			
		</script>
	</body>
</html>

小红帽与灰太狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web点名录

web点名录```javascript<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点名录</title> <style type="text/css"> h2{ color: red; font...
复制链接

扫一扫