js随机点名 方式 和 js生成随机数 案例

最新推荐文章于 2023-01-31 14:17:41 发布
最新推荐文章于 2023-01-31 14:17:41 发布
阅读量5.9k 收藏 29
点赞数 12
分类专栏： jsp html java 文章标签： javascript jsp 随机数 点名系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24708791/article/details/77893013
版权
java 同时被 3 个专栏收录
42 篇文章 0 订阅
订阅专栏
html
16 篇文章 0 订阅
订阅专栏
jsp
7 篇文章 0 订阅
订阅专栏

js 随机点名 和 js生成随机数

方式一 两个按钮的随机点名 案例

<script type="text/javascript">
        var startID=null;
        function startName() {
            var arr = [
                "隔壁老王",
                "东方不败",
                "西门吹雪",
                "欧阳无敌",
                "司马不平",
                "上官雪儿",
                "纳兰容若"
            ]
            var randomNum = Math.floor(Math.random() * 7);

            var showID= document.getElementById("showName");

            var showName = arr[randomNum];

            showID.innerHTML = showName;
            document.getElementById("startName").disabled=true;
            startID = setTimeout("startName();", 50);
        }

        function endName() {
            document.getElementById("startName").disabled=false;
            clearTimeout(startID)
        }
    </script>
    </head>

    <body>
        <center>
            <div id="showName" style="margin-top: 100px; color: red; font-size: 30px;" >请点击开始 </div>
            <hr />
            <button onclick="startName();" id="startName" style="font-size: 20px; color: darkmagenta;">开始点名</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button onclick="endName()" id="endName" style="font-size: 20px; color: darkmagenta;">结束点名</button>
        </center>
    </body>

方式二 单个按钮的随机点名 案例

<script type="text/javascript">
            var startID = null;

            function btnName() {
                var btnID = document.getElementById("startName");
                var textVaule = btnID.firstChild.nodeValue;
                if(textVaule == "开始点名") {
                    btnID.innerHTML = "停止点名";
                    startName();
                } else if(textVaule == "停止点名") {
                    btnID.innerHTML = "开始点名";
                    clearTimeout(startID);
                }
            }
            function startName() {
                var arr = [
                    "隔壁老王",
                    "东方不败",
                    "西门吹雪",
                    "欧阳无敌",
                    "司马不平",
                    "上官雪儿",
                    "纳兰容若"
                ]
                var randomNum = Math.floor(Math.random() * 7);
                var showID = document.getElementById("showName");
                var showName = arr[randomNum];
                showID.innerHTML = showName;
                startID = setTimeout("startName();", 50);
            }
        </script>
    </head>

    <body>
        <center>
            <div id="showName" style="margin-top: 100px; color: red; font-size: 30px;">请点击开始 </div>
            <hr />
            <button onclick="btnName();" id="startName" style="font-size: 20px; color: darkmagenta;">开始点名</button>&nbsp;&nbsp;&nbsp;&nbsp;

        </center>
    </body>

生成随机数 案例

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var startID = null;
            function btnName() {
                var btnID = document.getElementById("btn");
                var textVaule = btnID.value;
                if(textVaule == "生成随机数") {
                    btnID.value = "停止";
                    btn();
                } else if(textVaule == "停止") {
                    btnID.value = "生成随机数";
                    clearTimeout(startID);
                }
            }
            function btn(){

                var randomNum=Math.floor(Math.random()*900000)+100000;

                var showID=document.getElementById("show");
                showID.value=randomNum;

                startID=setTimeout("btn()",100);
            }
        </script>
    </head>
    <body>
        <center>
        <div style="border: 10px  solid gainsboro; align-content: center; width: 200px; height: 100px; margin-top: 200px;" >
        <input type="text" name="textValue"  id="show" style="margin-top: 20px; text-align: center;"/> <br /><br />
        <input type="button" id="btn" onclick="btnName()" value="生成随机数" />
        </div>
        </center>
    </body>
金玉良缘2017
关注
  • 12
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现随机点名
weixin_45575599的博客
11-02 1985
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
运用JS 实现随机点名 （随机点名）
qq_26705343的博客
12-26 3728
<div id="box"></div> <input type="button" id="btn"> </body> <script> var obox = document.getElementById("box") var obtn = document.body.children[1]; var stuName = ["张三","李四","王二","钱五","赵六","黄一"]; ...
js随机点名程序
11-25
js随机点名程序
js 实现一个随机点名
dsadada23的博客
10-08 4816
JavaScript实现一个随机点名，用到定时器和数组和随机数。
JS之随机点名器
qq_45921597的博客
09-28 939
【代码】JS之随机点名器。
js实现随机点名小功能
10-19
总结起来，这个JavaScript随机点名功能主要涉及以下知识点： 1. 字符串与数组的转换：`split()`方法用于将字符串按照指定分隔符切分成数组。 2. 随机数生成：`Math.random()`用于生成0到1之间的随机数，`Math.floor...
随机点名（JS+JQ）.rar
06-14
本篇文章将深入探讨一个基于JavaScript（简称JS）和jQuery（简称JQ）的随机点名程序，该程序允许用户自定义人名单，并能轻松删除人名。值得注意的是，由于程序涉及到本地HTML读写Cookie功能，因此推荐使用Internet ...
原生js随机点名PK直播代码.zip
07-04
在本项目中，“原生js随机点名PK直播...总之，这个项目涵盖了JavaScript的基础编程、随机数生成、事件处理、DOM操作、可能的实时通信和视觉特效等多个方面，对于初学者和有经验的开发者来说都是一个有价值的实践案例。
jQuery随机点名放烟花特效
07-24
总的来说，"jQuery随机点名放烟花特效"是一个集成了jQuery的DOM操作、随机数生成、CSS3动画的综合应用案例。它展示了如何结合多种技术创造出富有创意和互动性的Web应用，同时也为开发者提供了一个有趣的实践和学习...
JS+CSS实现的一个不错的点名机 源码奉送
03-16
2. **随机点名算法**：JS实现了一个随机数生成器，确保每次点名时都能公平地选取参与者。随机算法可能涉及到数组的shuffle方法，通过打乱数组顺序达到随机选取的目的。 3. **用户界面交互**：JS提供了丰富的事件...
js实现随机点名程序
10-16
主要介绍了js实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现随机点名
qq_73842669的博客
01-14 596
JS实现随机点名
js 随机点名
qq_43124006的博客
05-07 1767
随机点名
JavaScript 实现随机点名
O_osange的博客
01-14 1971
JavaScript 实现随机点名
用Js实现一个随机点名的程序
热门推荐
qq_42781095的博客
09-05 1万+
最近用到了一下随机点名程序，就自己整理一下。代码实现后的截图如下。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&a
JavaScript实现随机点名
yuan_xiangjun的博客
01-31 1244
JavaScript实现随机点名
js 生成不重复随机点名
最新发布
05-19
可以通过以下代码生成不重复的随机数： ```javascript let arr = ["张三", "李四", "王五", "赵六", "钱七"]; let usedIndex = []; for(let i = 0; i < arr.length; i++) { let randomIndex = Math.floor(Math.random() * arr.length); while(usedIndex.includes(randomIndex)) { // 如果已经使用过该随机数，则继续生成随机数，直到未使用过为止 randomIndex = Math.floor(Math.random() * arr.length); } usedIndex.push(randomIndex); console.log(arr[randomIndex]); // 输出随机点名结果 } ``` 该代码将给定的姓名列表存储在数组 `arr` 中，然后通过循环生成随机数，确保每个姓名只会被随机选中一次。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值