html简易版点名

想要登顶的菜鸟

已于 2022-08-20 23:29:55 修改

阅读量663

点赞数

文章标签： html javascript 前端

于 2022-08-20 23:10:44 首次发布

本文链接：https://blog.csdn.net/m0_58730471/article/details/126445789

版权

这是一个使用HTML、CSS和jQuery编写的简单随机点名程序。程序包含一个点名列表，点击开始按钮将每50毫秒随机选取名单中的一个名字显示在输入框中，结束按钮用于停止点名过程。样式表为表格设置了边框和内联样式，jQuery用于控制开始和结束按钮的禁用状态以及点名的定时更新。

摘要由CSDN通过智能技术生成

一、导入js文件

<script type=“text/javascript” src=“https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
下载
注意路径（目录层级）

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
    <style>
        table{
            border: 3px solid #761c19;
            margin: auto;
        }
        #t{
            text-align: center;
            margin-left: 45px;
            margin-bottom: 20px;
            color:red;
            border-color: #3e8f3e;
        }
    </style>
    <script>
        const names=["张三","李四","王五","赵六","尼古拉斯","罗三炮","张无忌","金毛狮王","电饭煲","胡歌"
        ,"刘亦菲","柯震东","罗贯中","霸王别姬","施耐庵","吴承恩"];
        function f(a,b){
            $("#3").prop("disabled",a);
            $("#4").prop("disabled",b);
        }
        $(function () {
            let index;
            let time;
            f(false,true);
            $("#3").click(function () {
                f(true,false);
                time=setInterval(function () {
                    index=Math.floor(Math.random()*names.length);
                    $("#t").prop("value",names[index]);
                },50);
            })
            $("#4").click(function () {
                f(false,true);
                clearInterval(time);
            })
        })
    </script>
<body>
    <table>
        <tr>
           <div id="1">
               <th style="color: #761c19 ;padding-left: 20px ;padding-bottom: 20px">随机点名</th>
           </div>
        </tr>
        <tr >
            <div >
                <td><input id="t" type="text" value="张三"></td>
            </div>
        </tr>
        <tr >
            <div >
                <td><input type="button" id="3" value="开始"></td>
            </div>
            <div >
                <td><input type="button" id="4" value="结束"></td>
            </div>
        </tr>
    </table>
</body>
</html>