简单好用的随机点名器

西北2020

于 2021-03-16 15:42:29 发布

阅读量5k

点赞数 7

分类专栏：前端技术文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44881854/article/details/114883014

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不知道有没有人和我一样，总觉得学习的过程很枯燥，很难找到成就感。其实没有成就感就是因为自己能力不够，所以才要努力学习。俺现在是一名双非大三的学生，不打算考研。所以即将要面对实习和工作，一想到这，就不由得焦虑起来。所以为了弥补大一大二所浪费的时间，我最近正在努力的学习java，每天学。因为想有自己的一技之长，想立足在这个行业，所以不得不逼自己一把。但是谁也不知道这个逼自己一把的过程有多煎熬，很多知识总是学会了就忘，所以我会尽量在学完一个知识点之后就总结一下下。我现在就是一个再普通不过的大三学生，我正在努力，不知大家都过的怎么样，也欢迎有志同道合的小伙伴来和我一起进步。为了让大家能够快速的找到成就感，我用刚学完的js给写了一个随机点名器，给大家分享一波。在这里插入图片描述
这就是这个随机点名器的首页了，当我们点击开始时，就会开始随机点名，时间间隔我这里设置的是50ms, 点击开始后，如下图：

然后我们就可以点击停止了，点击停止之后效果图如下：

这个随机点名器就是这样子的了。它的实现是很简单的，其实整个页面就由一个div元素，一个h1标签，再加一个按钮组成。给按钮添加点击事件，当点击按钮时，就生成一个随机数，当然按钮的颜色也相应的做些改变。那我们要产生什么范围的随机数呢，这得看随机点名的名单数组中的长度了。因为要随机点名，所以肯定了要有一个名单数组。然后当点击按钮的时候生成相应的随机数作为数组的下标，然后把数组中对应的下标元素写到h1标签当中。我们再设置一个定时器，当点击了开始后，定时器就开始，当点击了停止之后，定时器就停止。基本思路就是这样子，用到的知识点很少，主要是定时器的使用，还有就是点击事件的处理。下面给代码大家研究研究：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>随机点名器</title>
		<style type="text/css">
			div{
				background-color:deepskyblue;
				width: 400px;
				height: 300px;
				padding: 50PX;
				margin-left: 30%;
				margin-top: 100px;
				box-sizing: border-box;
				box-shadow:10px 10px  10px  #B00000;
				border-radius: 10px;
    			-moz-border-radius: 10px;
   			  	-webkit-border-radius: 10px;
    			-o-border-radius: 10px;
			}
			h1{
				width: 150px;
				height: 80px;
				background-color: orange;
				margin-left: 70px;
				padding-left: 15px;
				padding-top: 20px;
				box-sizing: border-box;
				border-radius: 10px;
    			-moz-border-radius: 10px;
   			    -webkit-border-radius: 10px;
    			-o-border-radius: 10px;		
			}
			.bt{
				width: 80px;
				height: 40px;
				margin-left: 110px;
				font-size: 18px;
				font-weight: bolder;
				background-color:green;
				border-radius: 10px;
    			-moz-border-radius: 10px;
   			    -webkit-border-radius: 10px;
    			-o-border-radius: 10px;
			}
		</style>
	</head>
	<body >
		<div class="random">
			<h1 id="randomName">
				随机点名
			</h1>
			<input type="submit" id="btin" class="bt" value="开始" onclick="rName()" />
			
		</div>
	</body>
</html>
	<script>
		 var flag;
	 	function rName(){	
	   var bt = document.getElementById("btin");
	   if(bt.value=="开始"){
	   	  bt.value="停止";
	      bt.style.backgroundColor="red";
	      //开始定时器
	      flag=window.setInterval("ranName()",50);
	   }else if(bt.value=="停止"){
	     window.clearInterval(flag);
	   	  bt.value="开始";
	      bt.style.backgroundColor="green";
	      
	   }
	 
	}
	
	function ranName(){
		var arr = new Array("赵丽颖","刘昊然","李宇春","何炅","谢娜","吴尊","刘德华","毛不易","张一山","贾玲","杨幂","郭麒麟","郭德纲","杨紫","于斌","梁靖康","王俊凯","王源","关晓彤","周冬雨","王一博","肖战","路飞","易烊千玺","周深");
		var name = document.getElementById("randomName");
		var len = arr.length;
		var rd = randomCode(0,len);
		name.innerHTML=arr[rd];
	}
	
	/*生成一个在某个范围内的随机数*/
	function randomCode(min, max) {
  return Math.floor(Math.random() * (max - min)) + min   
}
</script>

核心代码其实就是script标签内的代码，如果大家了解html和css的话就都能看懂上面那些布局了，这里就不赘述了。
该程序已经上传到我的资源，欢迎大家下载体验：快点我查看，有惊喜！（免费下载）

西北2020

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
简单好用的随机点名器

不知道有没有人和我一样，总觉得学习的过程很枯燥，很难找到成就感。其实没有成就感就是因为自己能力不够，所以才要努力学习。俺现在是一名双非大三的学生，不打算考研。所以即将要面对实习和工作，一想到这，就不由得焦虑起来。所以为了弥补大一大二所浪费的时间，我最近正在努力的学习java，每天学。因为想有自己的一技之长，想立足在这个行业，所以不得不逼自己一把。但是谁也不知道这个逼自己一把的过程有多煎熬，很多知识总是学会了就忘，所以我会尽量在学完一个知识点之后就总结一下下。我现在就是一个再普通不过的大三学生，我正在努力，不
复制链接

扫一扫

专栏目录