原生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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
jQuery取id有.的值的方法
May 21 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
深入理解Vue的数据响应式
May 15 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
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python字典序问题实例
2014/09/26 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
机电一体化专业应届本科生求职信
2013/09/27 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
上班离岗检讨书
2014/09/10 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书