随机点名小程序

最新推荐文章于 2024-07-25 11:26:35 发布

嚣张.

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.4w

点赞数 10

分类专栏：小程序文章标签： js html

本文链接：https://blog.csdn.net/weixin_44812027/article/details/119842039

版权

小程序专栏收录该内容

1 篇文章 1 订阅

订阅专栏

使用html+js实现随机点名

新建一个html 文件，将代码复制到html文件当中，然后直接用浏览器打开文件即可！

不知道怎么创建html,小白请看
html文件创建步骤：

在电脑上右键 --> 新建 -->文本文档
双击打开新建的文本文档，将代码全部复制粘贴到这个文本文档中。
选择“文件” --> “另存为”
在弹出的另存为对话框中下方的保存类型选择“所有文件”。
更改文件的名称为：点名器.html(说明：文件名后缀一定要是.html，要不然不能代码不能正常执行)，选择编码格式为UTF-8,点击保存即可。
找到刚才另存为的html文件，双击打开，正常打开界面结果如图所示

程序代码如下：

<!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>
    <div style="margin: auto;width: 500px;" >
        <input type="file" id="file" accept=".txt"/>
        <input type="button" name="11111" id="but" value="开始" onclick="startTimer()">
        <input type="button" name="11111" id="but" value="暂停" onclick="stopTimer()">
    </div>
    <div style="margin-top: 30px;">
        <p style="width: 500px; height: 60px;margin: auto; color: red;font-size: 28px;border: solid  1px  sienna;" id="p1"></p>
    </div>
    <div>
        使用步骤：<br/>
        <ol>
            <li>将Excel表格中的名单全选复制粘贴到txt文本文件中，然后保存到自己知道的位置</li>
            <li>点击选择文件，选择刚才保存的txt文件</li>
            <li>点击开始，即可滚动，点击暂停，即可暂停滚动</li>
        </ol>
    </div>
    <script>

       var datas = new Array;
        
       var str=[];
        
       //读取本地的TXT文件
        document.getElementById("file").onchange = function(){
            var file = this.files[0]; //获取文件
            var reader = new FileReader();
            var i = 0;
            reader.readAsText(file, "gb2312");
            reader.onload = function() {
                datas[0] = reader.result.split('\n');
            }
            console.log(datas);
            str = datas;
        }
        // 输出信息
        function print(){
                var min = 0;
                var max = str[0].length;
                var n = random(min,max)
                document.getElementById("p1").innerHTML=str[0][n];
                        
         }
        // 计时事件
        var myVar;
        //开始计时
        function startTimer(){
            if(str.length != 0){
                myVar =setInterval(function(){print()},10);
            }else{
                alert("请选择txt文件")
            }
            
        }

        
        //停止计时
        function stopTimer(){
            clearInterval(myVar);
        }

      
        // 随机数
        function random(min, max) {
        
            return Math.floor(Math.random() * (max - min)) + min;

        }
        
    </script>
</body>
</html>

嚣张.

关注

10
点赞
踩
36

收藏

觉得还不错? 一键收藏
3
评论
随机点名小程序

使用html+js实现随机点名新建一个html 文件，将代码复制到html文件当中，然后直接用浏览器打开文件即可！不知道怎么创建html,小白请看html文件创建步骤：在电脑上右键 --> 新建 -->文本文档双击打开新建的文本文档，将代码全部复制粘贴到这个文本文档中。选择“文件” --> “另存为”在弹出的另存为对话框中下方的保存类型选择“所有文件”。更改文件的名称为：点名器.html(说明：文件名后缀一定要是.html，要不然不能代码不能正常执
复制链接

扫一扫

专栏目录