用js写简单的点名器

点名器实现原理

1. 将所有名字都封装到一个数组中
2. 将数组下标通过随机函数随机产生
3. 定义定时器让函数每隔一段时间执行
4. 点击停止时，让定时器停止
5. 将选中的名字赋值给文本框

html结构

<form action="" name="form">
			<input type="text" name="name1" value="张三丰">
			<input type="text" name="name2" value="张无忌">
			<input type="text" name="name3" value="郭靖">
			<input type="text" name="name4" value="黄蓉"> 
			<p align="center">
				恭喜你被选中了<input type="text" id="result" value="">
			</p>	
			<input type="button" value="开始" onclick="begin()" id="btn1"><br>
</form>

css样式

<style type="text/css">
			form{
				width: 1000px;
				margin: 100px auto;
				font-size: 18px;
				color: red;
			}
			input[type="text"]{
				height: 30px;
				line-height: 30px;
				outline: none;
				font-size: 18px;
				color: red;
				text-align: center;
			}
			input[type="button"]{
				font-size: 18px;
				color: #fff;
				background-color: #007AFF;
				cursor: pointer;
				outline: none;
				border: none;
				width: 100px;
				display: block;
				border-radius: 20px;
				height: 40px;
				margin: 0 auto;
			}
</style>

js代码

<script type="text/javascript">
			var arr=["张三丰","张无忌","郭靖","黄蓉","杨过","小龙女","洪七公","欧阳锋","杨逍"];
			var btn1=document.getElementById("btn1");
			var result=document.getElementById("result");
			var speed=200;
			var t;
			function begin(){
				roll(speed);
				if(btn1.value=="开始"){
					btn1.value="停止"
					
					 result.value="";
				}else if(btn1.value=="停止"){
					btn1.value="开始";
					setTimeout(t);		//当点击停止时同时也让定时器停止
					var arr2=[document.form.name1.value,document.form.name2.value,document.form.name3.value,document.form.name4.value];
					result.value=arr2[Math.floor(Math.random()*4)];
				}
			}
			function roll(speedB){
				if(btn1.value=="停止"){
					//把name3的值赋给name4
					document.form.name4.value = document.form.name3.value;
					//把name2的值赋给name3
					document.form.name3.value = document.form.name2.value;
					//把name1的值赋给name2
					document.form.name2.value = document.form.name1.value;
					//让name1的值随机产生
					document.form.name1.value = arr[Math.floor(Math.random()*9)];
				}
				t=setTimeout("roll(" + speedB + ")", speedB);//定时器：让roll()函数每隔200ms执行一次，直至定时器停止
			}
</script>