原生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关于select的相关操作说明
Jan 13 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
vue基础知识--axios合并请求和slot
Jun 04 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 define()函数及defined()函数使用详解
2013/06/09 PHP
php curl基本操作详解
2013/07/23 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
phpwind放自动注册方法
2006/12/02 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
package.json文件配置详解
2017/06/15 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
小学国庆节活动方案
2014/02/11 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
求职自荐信的格式
2014/04/07 职场文书
房地产活动策划方案
2014/05/14 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年安全员工作总结
2014/11/13 职场文书
邮政营业员岗位职责
2015/04/14 职场文书