js实现复仇者联盟点名器

随机点名器训练

题目：为了活跃班级气氛，在班级上张老师想通过一个随机点名器来随机抽取学员回答问题，故按排你来使用 HTML+JavaScript 来实现如下图所示的随机点名器，第一张图是随机点名器的初始页面，当点击开始按钮时，JS 程序中提前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#name{width: 400px;height: 400px;border: 1px solid #2bf666;margin: 0px auto;line-height: 400px;text-align: center;background-color: grey;font-family: 微软雅黑;font-size: 40px;}/* #name{width: 400px;height: 400px;border: 1px solid #2bf666;margin: 0px auto;line-height: 400px;text-align: center;} */#bt{margin: 50px auto;cursor: pointer;width: 100px;height: 80px;font-size: 50px;background-color: limegreen;}
</style><body><div id = "name">复仇者联盟点名器</div><div id = "bt">开始</div>
</body>
<script>var arr = ['美队','钢铁侠','黑寡妇','蜘蛛侠','鹰眼','浩克','雷神','蚁人','黑豹']var name1 = document.getElementById("name");var bt = document.getElementById("bt");for(var i=0;i<name1.length;i++){console.log(name1[i].value)}// console.log(name.length)//声明一个timmer  用来消除定时器timmer = null;bt.onclick=function btFun(){// name1.innerHTML = "hahhah"bt.innerHTML = "停止";bt.style.backgroundColor = 'red'//生成随机数function rand(m,n){   // console.log(Math.ceil(Math.random()*(n-m+1))+m-1)return Math.ceil(Math.random()*(n-m+1))+m-1;}//统计数组长度a = arr.length;if(timmer == null){timmer = setInterval(function(){tmp = arr[rand(1,a)-1];name1.innerHTML = tmp;// return name.innerHTML;// alert(name.innerHTML)// console.log(arr[rand(1,a)-1])},1000);}else{clearInterval(timmer);timmer = null;bt.innerHTML ='开始';bt.style.backgroundColor = 'limegreen'}}
</script>
</html>

注意：在定义变量时一定不要使用到关键字，不然会一直出现undefined。
效果图：

js实现复仇者联盟点名器相关推荐

js实现简单随机点名器
之前做了js倒计时,现在做一个随机点名器,这个更简单,没什么技术含量,直接上代码: <!DOCTYPE html> <html><head><meta cha ...
【前端学习项目】web前端#001网页点名器（html+css+js实现用户交互）
目录首先先把学生一个一个的放到数组中其次遍历这个数组然后按钮事件触发最后附上完整代码: 最后的实现这个故事是这样开始的,新学期伊始,我们java老师为了检测学生的java基础水平,留下了这么 ...
js ，DOM节点，制作点名器
DOM节点 document 页面中最大的节点,有且只有一个.不属于元素节点,是页面中所有节点的容器. 根节点. html 页面中最大的元素节点.根元素节点. 元素节点 html标签文本节点每一段 ...
node 加密解密模块_NODE.JS加密模块CRYPTO常用方法介绍
使用require('crypto')调用加密模块. 加密模块需要底层系统提供OpenSSL的支持.它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接. 该模块还提供了一套 ...
elementui vue的html随机点名器软件网页版源码1.1
**在之前基础上新增了点击开始点名之后,判断姓名池的数量的判断,如果数量为零给出提示. 按钮的双击, 如果是在姓名池,在会进入上面的被点名状态, 如果是在上面卡片中的点名状态,则会重新回到姓名池 ** ...
基于element-ui，vue的html随机点名器
点击开始点名,进入循环,点击停止,会禁用按钮在500毫秒之后,将点到的人名字放到上面,在下面表体会消失这个人, 点名之后可以刷新.暂时还没有做将点到的人还回来.(1.0) 用到的资料,element ...
网页点名器（移动端、pc端）
因为希望观赏舒适,故将css,javascript写成了内联辉常努腻的网页点名器-可搬运-分享无碍 <!DOCTYPE html> <html><head>< ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
Node.js 入门
Node.js是一个基于chrom V8引擎的一个JavaScript的运行环境.它可以用来开发后端程序. Node.js像浏览器一样,也内置有一些API,这些api中最主要的有 fs模块.path模 ...

js实现复仇者联盟点名器

随机点名器训练

js实现复仇者联盟点名器相关推荐

最新文章

热门文章