原生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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
理解javascript中的with关键字
Feb 15 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
jquery图片放大镜效果
Jun 23 jQuery
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
浅谈laravel aliases别名的原理
2019/10/24 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
学习python (2)
2006/10/31 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
关于python中导入文件到list的问题
2020/10/31 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
实习自我评价怎么写
2013/12/02 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
委托证明的格式
2014/01/10 职场文书
元旦联欢会感言
2014/03/04 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
经营场所证明范本
2015/06/19 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书