用js怎样写一个随机点名器?
Admin 2021-05-25 群英技术资讯 1755 次浏览
老师在课堂上,经常会随机点名学生回答问题,我们现在学习了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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了Vue3 使用axios拦截器打印前端日志,这是一种比较值得推荐的方式,也就是写一次,就不用总写console.log了。下面来看看文章的详细内容,需要的朋友可以参考一下
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下
React传递参数的方式有哪些?对于React传递参数,有父子组件之间传递参数和路由传参,那么具体怎样实现呢?下面小编给大家分享几个实例,有需要的朋友可以参考。
目录前言FabricObject 基类的实现抽离共同属性抽离共同方法Rect 类的实现本章小结前言在上个章节中我们已经创建了画布,接下来就可以进行物体的绘制了,那具体要怎么画呢?根据文章标题可以猜到应该是要抽象出一个物体基类,归纳出一些它们的共性,那它们能有啥共性呢,毕竟每个物体好像都是各画各的。对于这个问题大家可以先
今天我们来了解一下JS数组reduce方法的使用,在Javascript数组方法中,一般大家使用的迭代方法有map、filter、forEach等这些,其实reduce方法也很好用,下面我们就来详细的了解看看reduce()方法。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
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核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008