用js怎样写一个随机点名器?
Admin 2021-05-25 群英技术资讯 1662 次浏览
老师在课堂上,经常会随机点名学生回答问题,我们现在学习了JavaScript,那么怎样用JS来实现一个随机点名器呢?下面小编就给大家分享一个实现简单的随机点名器的代码,感兴趣的朋友就继续往下看吧。
效果:

代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:300px;
height:200px;
border:1px solid #ccc;
/*position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;*/
margin: 100px auto;
text-align: center;
}
h1{
width:150px;
height:60px;
line-height: 60px;
text-align: center;
font-size: 30px;
background-color: red;
margin: 10px auto;
}
button{
width:100px;
height:40px;
background-color: dodgerblue;
border:0;
font-size: 24px;
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<h1></h1>
<button>开始</button>
<button>停止</button>
</div>
<script>
var h1=document.getElementsByTagName('h1')[0];
var btn=document.getElementsByTagName("button");
var arr=["苏晨旭","张志阳","小明","社会坤哥","药","敬珍","锦涛","网管","社会辰哥","渣男","雪","宝贝曼","大个","睡神","龙爷","英儿","东北娃","珂珂","黄花大闺女","狗蛋",
"狗子","天娇","志强","晋玮","海涛","迈姐","新凤","环姐","二狗"];
var ind=ranFun(0,arr.length-1)
h1.innerHTML=arr[ind];
var timer;
btn[0].onclick=function(){
clearInterval(timer)
timer=setInterval(function(){
h1.innerHTML=arr[ranFun(0,arr.length-1)]
},100)
}
btn[1].onclick=function(){
clearInterval(timer)
}
function ranFun(a,b){
return Math.floor(Math.random()*(b-a+1)+a)
}
</script>
</body>
</html>
以上就是关于JS实现随机点名的代码介绍了,上文有具体的代码,需要的朋友可以参考学习,希望大家阅读完这篇文章能有所收获。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
我们在做网站开发的时候,经常会有JavaScript实现随机验证的需求,那么究竟使用JS如何实现4位随机验证码的呢?感兴趣的朋友就跟随小编一起来学习吧。
这篇文章主要给大家介绍了关于vue组件的路由高亮问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
JavaScript怎样做缓动动画?使用JavaScript原生定时器就可以实现动画的缓动效果,实现的原理其实很简单,也就是通过定时器修改边距达到移动动画效果,那么具体怎样做呢?下面我们来详细的了解看看。
这篇文章给大家分享的JS实现动态添加圆圈序号效果。小编觉得挺实用的,而且这种效果的效果也比较美观,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
本文主要介绍了React Fragment介绍与使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008