效果：

代码：

<!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 随机点名
javascript随机点名视频 https://www.bilibili.com/video/BV1PJ41177YW?p=4 代码 <!DOCTYPE html> <html ...
Javascript随机点名系统
本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器等. 运行后的效果图主要思路与方法开始按钮与结束按钮相互切换点击开始按钮,将按钮中的内 ...
JavaScript——随机点名练习
随机点名要求: 当点击开始按钮时,名单会随机变换跳动显示,开始按钮变成了停止按钮: 当点击停止按钮时,名字的随机变换跳动停止,显示出的名字即为随机点击出来的姓名,达到随机点名效果. 思路: 1.使用 ...
javascript制作随机点名表
<html> <head> <meta http-equiv="Content-Type" content="text/html;chars ...
原生JavaScript随机抽奖案例
案例需求:抽奖机中有多个不同的奖项,点击按钮开始进行随机抽奖,默认所有的奖项得到的概率是一致的. 页面布局:大致布一下,可根据喜好进行调整. <div><div class=&quo ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录一.表格表单的随机选择效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局第一步: 第二步: 2.CSS布局 3.JS的布局第一步: 第二步: 第三步: 二.简单的随机点名效果展 ...
使用原生Js实现随机点名
使用原生Js实现随机点名最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html la ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

原生JavaScript随机点名表

效果：

代码：

原生JavaScript随机点名表相关推荐

最新文章

热门文章