原生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 27 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
详解JavaScript执行模型
Nov 16 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python logging模块学习笔记
2014/05/24 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python实现Adapter模式实例代码
2018/02/09 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
银行实习鉴定
2013/12/13 职场文书
商业活动邀请函
2014/02/04 职场文书
开工仪式策划方案
2014/05/23 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
亮剑观后感600字
2015/06/05 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
古诗之感恩老师
2019/10/24 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
python字典进行运算原理及实例分享
2021/08/02 Python
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记