用javascript实现随机点名的效果

最新推荐文章于 2024-04-27 22:13:08 发布
最新推荐文章于 2024-04-27 22:13:08 发布
阅读量2.2k 收藏 9
点赞数 5
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tea_tea_/article/details/125731332
版权

第一步：一个基础的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
</body>
</html>

第二步：编写js代码（先定义一个函数）

<script>
         function number() {
            
            
        }
       
    </script>

第三步：定义一数组

       <script>
         function number() {
            
        }
        var arr=['1','2','3','4','5','6','7','8','9','10','11','12','13','14',
        '15','16','17','18','19','20','21','22','23','24','25','26'];
      
    </script>

第四步：添加一个return 加上向下取整和随机数

 <script>
         function number(max,min) {
             return Math.floor(Math.random()*(max-min+1)+min)
            
        }
        var arr=['1','2','3','4','5','6','7','8','9','10','11','12','13','14',
        '15','16','17','18','19','20','21','22','23','24','25','26'];
       var res= number(arr.length-1,0);
       document.write(arr[res]);
    </script>

第五步:全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>//随机点名
         function number(max,min) {
             return Math.floor(Math.random()*(max-min+1)+min)
            
        }
        var arr=['1','2','3','4','5','6','7','8','9','10','11','12','13','14',
        '15','16','17','18','19','20','21','22','23','24','25','26'];
       var res= number(arr.length-1,0);
       document.write(arr[res]);
    </script>
</head>
<body>
    
</body>
</html>

Tea-pd
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaScript实现随机点名程序
10-15
主要为大家详细介绍了JavaScript实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现随机点名
tcugg的博客
08-19 398
javascript实现一个简单的随机点名
原生js实现随机点名效果
weixin_68854196的博客
08-04 465
清除定时器即可，并且使用splice()方法，将已经被点过名的人剔除后续随机选人名单中，避免重复点名。将Math.random()随机小数 X 数组长度，向下取整，就可以获得随机数。例：Math.floor(3.1)=Math.floor(3.9)=3。用到了setInterval定时器，给定时器取名为k，方便后面清除。最后给开始按钮加个优化，当数组中只有最后一个人的时候，禁用按钮。random()可以随机返回一个小数，取值范围为[0,1)先声明一个数组，数组里面放入将要被点名人的名单。
使用JS来实现随机点名的效果
weixin_64965154的博客
05-24 1907
addEventListene是监听事件的按钮，然后后面的click是事件，就是点击这个按钮就会执行下面的随机数的方法。clearInterva：关闭定时器的意思，因为我们做一个点名事件是需要通过定时器来完成，这里的意思是停止的意思。这里的意思是这个素组如果只剩下一个元素，那么就会禁用开始和停止这两个按钮，如果换是flase就可以继续使用。const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']这里我们在这里写一个timeid是指这个事件的按钮，所以我们要在首页去定义二个变量。
HTML+JavaScript实现随机点名｜随机抽奖效果-demo
JackieDYH的博客
03-04 678
HTML+JavaScript实现随机点名｜随机抽奖效果-demo。
利用CSS+HTML+JS完成一个随机的点名系统
m0_62756941的博客
07-28 232
【代码】利用CSS+HTML+JS完成一个随机的点名系统。
js 实现一个随机点名
dsadada23的博客
10-08 4709
JavaScript实现一个随机点名，用到定时器和数组和随机数。
js实现随机点名
lishunyu1226的博客
01-18 940
前端
JavaScript 实现随机点名
O_osange的博客
01-14 1875
JavaScript 实现随机点名
JS案例学习——随机点名案例
weixin_57385603的博客
02-28 2394
JS案例学习——随机点名案例
javascript网页随机点名实现过程解析
10-16
主要介绍了javascript实现网页随机变色及实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript实现随机点名小程序
01-21
本文实例为大家分享了JavaScript实现随机点名小程序的具体代码，供大家参考，具体内容如下 导入jar包 将jquery-3.3.1.min.js包导入到web目录下的js包 代码实现 <!DOCTYPE html> <html lang=en> <head...
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
qq_51752841的博客
04-27 502
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
后端开发是一个涉及广泛技术和工具的领域.docx
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
三菱PLC通讯程序实例
04-30
FX5U PLC作为主、从站的通讯方式程序实例，以及包含详细说明文件...
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
最新发布
04-30
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
JavaScript实现随机点名
04-17
可以使用Math.random()函数生成随机数，再将随机数与学生名单长度相乘得到对应的下标，从而随机选取一个学生。具体实现可以参考以下代码： ```javascript // 学生名单 var students = ["小明", "小红", "小刚", "小美", "小华"]; // 生成随机下标 var index = Math.floor(Math.random() * students.length); // 输出随机选中的学生名字 console.log("本次点名选中的学生是：" + students[index]); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值