点名器实现原理
- 将所有名字都封装到一个数组中
- 将数组下标通过随机函数随机产生
- 定义定时器让函数每隔一段时间执行
- 点击停止时,让定时器停止
- 将选中的名字赋值给文本框
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>