原生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的IE和Firefox兼容性汇编
Jul 01 Javascript
PHP PDO操作总结
Nov 17 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
一些实用性较高的js方法
Apr 19 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
JavaScript运行原理分析
Feb 09 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
微信小程序如何获取地址
Dec 24 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
B2K与车机的中波PK
2021/03/02 无线电
PHP生成Flash动画的实现代码
2010/03/12 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
php实现文章评论系统
2019/02/18 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
详解Python3 pickle模块用法
2019/09/16 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
服务标语口号
2014/07/01 职场文书
设备收款委托书范本
2014/10/02 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
公务员政审材料
2014/12/23 职场文书
2015年司机工作总结
2015/04/23 职场文书
个人工作决心书
2015/09/22 职场文书