js实现点名器 – 云原生导航

内容目录

今天写了个简单的点名器，预览地址：http://www.chenjie.info/demo/rollcall.html 。主要使用了定时器来实现，代码如下。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			body{
				margin:0px;
				padding:0px;
				font-family:"微软雅黑";
			}
			#mingqi{
				height:250px;
				width:400px;
				margin:50px auto;
				text-align:center;
				border:5px  double blue;
			}
			#mingqi p{
				border:2px solid purple;
				height:80px;
				line-height:80px;
				width:150px;
				margin:40px auto;
			}
			#mingqi div button{
				width:80px;
				height:50px;
			}
		</style>
	</head>
<body>
	<div id="mingqi">
		<p>点名器</p>
		<div>
			<button onclick="start()">开始</button>
			<button onclick="stop()">停止</button>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8">
		var xh=null;
		var list=['小柳','小五'];
		//标记是否已经开始循环，防止叠加定时
		var flag=false;
		function start(){
			var p=document.getElementsByTagName('p')[0];
			if(!flag){
			xh=setInterval(function(){
					var num=Math.floor(Math.random()*list.length);
					p.innerHTML=list[num];
					},50);
					flag=true;
			}
		}

		function stop(){
			clearInterval(xh);
			var p=document.getElementsByTagName('p')[0];
			p.innerHTML="<div style='color:red'>"+p.innerHTML+"</div>";
			flag=false;
		}
	</script>
</body>
</html>