原生JavaScript实现随机点名表


Posted in Javascript onJanuary 14, 2021

本文实例为大家分享了JavaScript随机点名表的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现随机点名表

代码:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
Array对象方法参考
Oct 03 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
node.js超时timeout详解
Nov 26 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
React实现轮播效果
Aug 25 Javascript
vue动态设置路由权限的主要思路
Jan 13 #Vue.js
Java 生成随机字符的示例代码
Jan 13 #Javascript
vue组件是如何解析及渲染的?
Jan 13 #Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 #Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
You might like
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php四种定界符详解
2017/02/16 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
require.js的用法详解
2015/10/20 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
vue 更改连接后台的api示例
2019/11/11 Javascript
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python反扒机制的5种解决方法
2021/02/06 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
学生励志演讲稿
2014/01/06 职场文书
法律进企业活动方案
2014/03/04 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
党员个人剖析材料
2014/09/30 职场文书
运动员代表致辞
2015/07/29 职场文书