如何用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>

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、本站解压密码统一为:yudouyudou
3、本站微信客服/失效补发:rsst58
4、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
5、关于下载,播放声音字幕,解压等问题,请点击查看>>常见问题
时光屋 » 如何用JS写一个点名器

发表评论

至臻视听_发烧收藏

会员介绍 常见问题