原生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 click([data],fn)使用方法实例介绍
Jul 08 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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 xml文件操作实现代码(二)
2009/03/20 PHP
php除数取整示例
2014/04/24 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
查看Django和flask版本的方法
2018/05/14 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python中如何进行连乘计算
2020/05/28 Python
python可以用哪些数据库
2020/06/22 Python
用python写爬虫简单吗
2020/07/28 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
公司投资建议书
2014/05/16 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Python入门之基础语法详解
2021/05/11 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis