原生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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
没有document.getElementByName方法
Aug 19 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
Angular2整合其他插件的方法
2018/01/20 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
电气工程师岗位职责
2014/01/01 职场文书
入党转预备思想汇报
2014/01/07 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
销售内勤岗位职责
2014/04/15 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
食品药品安全责任书
2015/05/11 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
golang特有程序结构入门教程
2021/06/02 Python