js制作点名

已于 2022-03-30 09:11:40 修改
阅读量374 收藏 1
点赞数 2
文章标签： javascript
于 2022-03-30 09:09:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_jia233/article/details/123837515
版权

效果展示

1打开Visual Studio Code然后CTRL+n新建然后把文件设置成HTML然后！获取html内容

2在body做一个p标签和按钮，按钮需要用div包裹。Button按钮和p标签都要给id

3在style里给body背景颜色，按钮大小，p标签居中，div居中。

4在script里声明p拿来获取文字，还要做防暴力点击,按钮按下后获取名字,然后几秒后停止

小结:这次的随机点名是上次抽奖的升级版它多了几个中奖的，用了math，延迟定时器和正常的定时器。非常好用都不需要暂停按钮了，时间也是随机的，但不足有很多，还得认真学习继续升级，对于我而言我现在学习js，是为了做有意思的东西而且还能深入了解这个知识。

shi_jia233
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现简易点名器
weixin_57762662的博客
04-10 1369
过去的时候，看到老师用的随机点名程序，真的是很厉害呀，但是自己做不出来；现在自从了解了一些CSS样式和JS语法，于是自己用最简易的方法做了一个点名器，好了现在就让我们来看一看吧。 样式展示：这里写的“随机名”是我以一个P标签来作为抽取的名字，还有一个开始点名的按钮是用来开始抽取的，粉色的背景就不用多说了，大家都懂； 效果展示：当我们点下“开始点名”按钮的时候，上面的P标签就由随机名变成了一个我已经在代码里写的一个随机名（这里都是本人初中的一些玩的好的同学英文缩写名）； 代码讲解：首先要有好的效
js基础（创建标签）
anchaqian9321的博客
02-01 121
创建标签 var divBox1 = document.getElementById('box1'); var p = document.createElement('p'); p.innerHTML = '你好啊'; divBox1.appendChild(p);//把p标签加入到divBox1标签内部的后面 创建属性 ...
JS——利用js实现简易点名系统
Bonsoir777的博客
08-24 1182
本文主要介绍的是如何利用JS实现简易点名系统的实现过程。
C#课堂随机点名程序
09-01
在大学课堂里，老师在课堂上考勤和提问是很频繁的行为。把学生名单按照txt格式导入，然后点击开始按钮，学生的姓名就会随机在界面上滚动，点击停止就会暂停滚动，类似于抽奖。起到一个随机点名和随机考勤的作用。 可以导出点到名字的名单，记录迟到结果。
点名（点菜版）js实现
2201_75321887的博客
03-06 613
点菜（可更换，如需点名则把菜名改为人名即可）详情请看js代码
通过html+css+js制作随机点名
最新发布
09-26
这是由html+css+js制作的一个随机点名页面，下载后可以直接双击点开就可以使用啦，如果想要符合自己的需求，可以抖音搜索122355808或者哔哩哔哩搜索 web-lyh 观看教学视频。 这个页面适合老师使用，可以将内容换成...
JavaScript实现随机点名程序
11-21
本文实例为大家分享了js实现随机点名程序的具体代码，供大家参考，具体内容如下 效果： 录制的gif效果图没那么理想，其实速度是比这个快的 思路： 1.定义一个数组，存放名单 2.启动定时器，设定间隔时间不断调用...
javascript网页随机点名实现过程解析
12-13
主要知识点涉及if选择结构判断语句、数组的...随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid red; } #uname{ width: 100px; height: 50px;
JavaScript实现随机点名器
10-15
主要为大家详细介绍了JavaScript实现随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery班级点名册游戏抽奖特效代码
03-20
Query班级点名册游戏抽奖代码基于jquery.1.7.2.js制作，简单有趣，可以制作班级活动抽奖游戏使用。 主要功能： 1、可以设置一组只显示但不会中奖的人员 2、可以在设置一组允许中奖人员 3、来进行虚假抽奖操作 4、...
C#开发的随机点名程序
12-27
C#开发的随机点名程序,很实用的一个小东西！
js实现课堂随机点名系统
10-15
主要介绍了js实现课堂随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现随机点名程序
10-16
主要介绍了js实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js点击按钮文字随机点名器代码.zip
07-05
Js点击按钮文字随机点名器代码是一款随机点名器，也可作为抽奖使用。
随机点名升级版
weixin_47389477的博客
06-21 108
//注释比较明确 1.界面可视化 2.点击按钮可以实现开始或者停止功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>random,随机点名</title> </head&
简易版JS点名器
m0_73860660的博客
10-30 184
主要使用JSfor循环的使用。
JS+HTML+CSS 实现课堂随机点名系统
fyh559的博客
03-14 1988
js+html+css 实现的课堂随机点名系统。
JS随机点名器
ycy021416的博客
06-29 317
JS随机点名器
JavaScript实现对P标签的操作
ZZY1078689276的专栏
07-31 7307
获取P标签： $(document).ready(function(){ $("p").click(function(){ var ids=document.getElementById("p1"); alert("id:"+ids); var names=document.getElementsByName("name1"); alert("na
html制作随机点名系统
06-01
以下是一个简单的 HTML 随机点名系统的示例： ```html <!DOCTYPE html> <html> <head> <title>随机点名系统</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { font-size: 1.5rem; } button { font-size: 1rem; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <h1>随机点名系统</h1> <p>点击下面的按钮进行随机点名：</p> <button onclick="randomName()">点名</button> <div id="result"></div> <script> var names = ["张三", "李四", "王五", "赵六", "钱七"]; // 将需要进行点名的名字存储在一个数组中 function randomName() { var index = Math.floor(Math.random() * names.length); // 生成一个随机的数组下标 document.getElementById("result").innerHTML = names[index] + "同学，请回答问题。"; // 在页面上显示随机选中的名字 } </script> </body> </html> ``` 这个随机点名系统使用了一个数组来存储需要进行点名的名字，每次点击“点名”按钮时，会生成一个随机的数组下标，并在页面上显示对应的名字。可以根据需要修改数组中的名字，以实现不同的随机点名功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值