原生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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Js和VUE实现跑马灯效果
May 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
PHP 判断变量类型实现代码
2009/10/23 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
基于php权限分配的实现代码
2013/04/28 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
基于vue实现分页效果
2017/11/06 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Python实现线程池代码分享
2015/06/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
如何利用Python识别图片中的文字
2020/05/31 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
手工社团活动方案
2014/02/17 职场文书
分公司负责人任命书
2014/06/04 职场文书
团队精神口号
2014/06/06 职场文书
2015年质检工作总结
2015/05/04 职场文书
单位收入证明范本
2015/06/18 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
redis 查看所有的key方式
2021/05/07 Redis