JavaScript点名器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点名</title>
</head>
<style>.bg{background: whitesmoke;width: 801px;height: 448px;border: 1px solid black;margin:  0 auto;}.bg1{border: 1px solid black;background: #5d68cc;border-radius: 41px;width: 227px;height: 79px;margin:  50px  auto 0 auto;text-align: center;line-height: 79px;color:white;font-size: 26px;cursor: pointer;}
</style>
<body>
<div class="bg"><div class="bg1" onclick="f()">开始</div><div class="bg1" id="a">点名啦</div><div class="bg1" onclick="clearInterval(timeId)">结束</div>
</div>
</body>
<script type="text/javascript">var names = document.getElementById("a");//找到需要变换的divvar timeId;//声明一个定时函数var arr =["陶鑫", "张博帆", "李永鑫", "翟江涛", "杜红江", "陈恒欣", "侯泽鹏", "康俊鹏","张文豪","王一飞", "李贵秀", "李长河", "赵京涛", "喻龙", "秦钰林", "周世隆", "杜晨旭", "谢亚飞","张世杰", "王志豪", "任俊鹏", "徐敏", "叶青纯", "时东恒", "程佳乐", "宁鑫源", "张逸飞","王文琪", "李俊杰", "夏一垒", "张馨平", "李贵秀", "于晖建", "杨怡浩", "许润泽", "杜龙祥","郑凯娜", "安德裕", "王钢", "张成龙", "全紫洋", "李家伟", "蔡心怡", "乔卓昀","李城孝", "王嘉磊", "庄家润", "李世豪", "梁重阳", "谷纪甫", "李森", "万亚军", "李沛霖","李磊磊", "郑嘉毅", "谷航磊", "张超博", "李龙", "徐家旺", "杨嘉宁"];//创建存储名字的数组function f1() {var num = parseInt(Math.random()*arr.length);//创建随机数names.innerHTML=arr[num];//生成随机数对应数组的下标代替对应div的文本}function f(){timeId = setInterval("f1()",100)//定时函数每个100毫秒调用一次f1()改变对应div对应的内容达到随机点名的效果}
</script>
</html>

JavaScript点名器相关推荐

使用HTML及简单的JavaScript脚本制作一个点名器
点名器吐槽昨天被点名器坑的很惨,老师用他那所谓的"点名器",一节课我被叫起来4次,最后一次,大家会意的笑了笑.我是实在无奈,好歹也是个计算机老师,不能自己写个随机点名器吗?弄了顺 ...
Html+css+JavaScript做一个随机点名器
HTML+CSS+JavaScript 来实现随机点名器话不多说,直接开整第一张图是随机点名器的初始页面当点击开始按钮时,JS 程序中提前准备好人员(数组)名单 var arr = [" ...
JavaScript 语言之随机点名器制作训练
题目为了活跃班级气氛,Mr.王想通过一个随机点名器来随机抽取学员回答问题,故安排你来使用 HTML+CSS+JavaScript 来实现如下图所示的随机点名器,第一张图是随机点名器的初始页面,当 ...
Javascript小练习——班级学号点名器
1.案例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
elementui vue的html随机点名器软件网页版源码1.1
**在之前基础上新增了点击开始点名之后,判断姓名池的数量的判断,如果数量为零给出提示. 按钮的双击, 如果是在姓名池,在会进入上面的被点名状态, 如果是在上面卡片中的点名状态,则会重新回到姓名池 ** ...
基于element-ui，vue的html随机点名器
点击开始点名,进入循环,点击停止,会禁用按钮在500毫秒之后,将点到的人名字放到上面,在下面表体会消失这个人, 点名之后可以刷新.暂时还没有做将点到的人还回来.(1.0) 用到的资料,element ...
【前端学习项目】web前端#001网页点名器（html+css+js实现用户交互）
目录首先先把学生一个一个的放到数组中其次遍历这个数组然后按钮事件触发最后附上完整代码: 最后的实现这个故事是这样开始的,新学期伊始,我们java老师为了检测学生的java基础水平,留下了这么 ...
js实现复仇者联盟点名器
随机点名器训练题目:为了活跃班级气氛,在班级上张老师想通过一个随机点名器来随机抽取学员回答问题,故按排你来使用 HTML+JavaScript 来实现如下图所示的随机点名器,第一张图是随机点名器 ...
网页点名器（移动端、pc端）
因为希望观赏舒适,故将css,javascript写成了内联辉常努腻的网页点名器-可搬运-分享无碍 <!DOCTYPE html> <html><head>< ...

JavaScript点名器

JavaScript点名器相关推荐

最新文章

热门文章