Html+css+JavaScript做一个随机点名器

HTML+CSS+JavaScript 来实现随机点名器

话不多说，直接开整
第一张图是随机点名器的初始页面

当点击开始按钮时，JS 程序中提前准备好人员（数组）名单
var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"]

随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，

当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。

代码在此：

<script>
	var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"];
	var mytime = null;
	var flag1;
	btn.style.backgroundColor = "#00ff00"
	function ramdom(){
		if(mytime == null){
			mytime = 1;
			flag1=window.setInterval("ramdomName()",10);
			btn.innerHTML = '停止';
			btn.style.backgroundColor = "red"
			
		}else{
			window.clearInterval(flag1);
			btn.innerHTML = '开始';
			mytime = null;
			btn.style.backgroundColor = "#00ff00"
			
		}
	}
	function ramdomName(){
		var btn = document.getElementById("btn");
		var msg = document.getElementById("name");
		var index = parseInt(Math.random()*arr.length);
		
		msg.innerHTML = arr[index];

	}

</script>

页面布局和css样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随机点名器</title>
		<style>
			.box {
	    		width: 300px;
	    		height: 200px;
	    	
	    		background-color:orangered;
	    		font-size: 30px;
	    		border-radius: 10px;
  		
	  		}
	  		.innerbox{		
	  			position: absolute;
	  			top: 60px;
	  			left: 170px;
				width: 200px;
	    		height: 50px;
	    		border-radius: 10px;
	    		background-color:grey;
	    		font-size:30px;
	    		font-weight: bold;	 
	  		}
	  		.button{
	  			position: absolute;
	  			top: 140px;
	  			left: 250px;
	  		}
  		</style>		
	</head>
	<body>
		<div align="center">
			<div class = "box"  >
				<div  >
					<p  class = "innerbox"  id ="name" >随机点名器</p>
					
				</div>
				<div class="button" >
					<button  onclick="ramdom()" id="btn" type="button" >开始</button>
				</div>
				 	
			</div>

		</div>	
	</body>
</html>

具体的实现过程就不多说了，感兴趣的小伙伴可以去学习下css和html以及javascript都是很容易上手切很有成就感的哦