原生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 trim() 功能源代码
Feb 14 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
js实现一个简易计算器
Mar 30 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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的消息通信机制测试实例
2016/11/10 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python 调用钉钉机器人的方法
2019/02/20 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python requests证书问题解决
2019/09/05 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python实现斗地主分牌洗牌
2020/06/22 Python
pymysql模块使用简介与示例
2020/11/17 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
农行实习自我鉴定
2013/09/22 职场文书
小学生家长评语大全
2014/02/10 职场文书
文明寝室标语
2014/06/13 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
模范教师材料大全
2014/12/16 职场文书
大学生自我评价范文
2015/03/03 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记