使用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>