jQuery的简单运用：简单点名器

L..P

已于 2023-07-13 17:58:12 修改

阅读量271

点赞数

分类专栏： web基础文章标签： jquery 前端 javascript

于 2023-07-09 17:44:38 首次发布

本文链接：https://blog.csdn.net/thefairwilldim/article/details/131625017

版权

web基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

该文章介绍了一个使用HTML和jQuery编写的简易点名器，通过创建4x4的表格和两个按钮，实现了随机选取表格中单元格的功能。当点击开始按钮时，表格中的一个单元格会随机变为黄色，模拟点名过程；点击停止按钮则结束点名。CSS用于美化界面，jQuery处理交互逻辑。

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

最终结果如下图所示：

1.创建HTML文件，在头部添加jquery文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 
</head>
<body>

</body>
</html>

如果你的本地没有导入现成的js文件，script内容可替换如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2.添加文件的主题内容，及表格+按钮

我这里创建的是4X4的表格，其实创建多少都没关系，只要你是用的table标签，后续操作照着我的来就不会有影响。

<div>
  <h1 align="center">简易点名器</h1>
  <table id="namelist" border="1px soild" width="550px" height="500px" cellpadding="0" cellspacing="0">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </table>
  <div id="btn">
    <input type="button" id="btn1" value="开始">
    <input type="button" id="btn2" value="停止">
  </div>

</div>

3.为主体内容添加样式

样式设置按照你喜欢的来就行，注意选择器不要写错就行。

<style>
    table{
      margin: auto;
    }
    tr td{
      text-align: center;
      background: whitesmoke;
    }
    #btn1,#btn2{
      width: 160px;
      height: 40px;
      font:25px bold 楷体;
      margin-top: 30px;
      margin-left: 680px;
    }
  </style>

4.利用jQuery实现随机点名效果

代码中的每一步讲的应该还是挺清楚的，就不额外写文字说明了。

<script>

  $(function () {
    var cells = $("#namelist td"); // 获取所有单元格
    var startid;

    //开始按钮
    $("#btn1").click(function () {
      //处理按钮是否可使用
      $("#btn1").prop("disabled",true)
      $("#btn2").prop("disabled",false)
      startid=setInterval(function () {
        var randomIndex = Math.floor(Math.random() * cells.length);//生成与单元格长度一致的随机数
        var randomCell = $(cells[randomIndex]);
        cells.css("background","whitesmoke")//将所有单元格背景设置为初始背景颜色一致，如果不这么做，最后所有单元格都将变为黄色而无法区分随机单元格
        randomCell.css("background","yellow")//设置随机获取的单元格背景颜色
      },100)
    });

    //停止按钮
    $("#btn2").click(function () {
      //处理按钮是否可使用
      $("#btn1").prop("disabled",false)
      $("#btn2").prop("disabled",true)
      clearInterval(startid)//去除定时器
    });
  })
  
</script>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>-->
  <style>
    table{
      margin: auto;
    }
    tr td{
      text-align: center;
      background: whitesmoke;
    }
    #btn1,#btn2{
      width: 160px;
      height: 40px;
      font:25px bold 楷体;
      margin-top: 30px;
      margin-left: 680px;
    }
  </style>
</head>
<body>
<div>
  <h1 align="center">简易点名器</h1>
  <table id="namelist" border="1px soild" width="550px" height="500px" cellpadding="0" cellspacing="0">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </table>
  <div id="btn">
    <input type="button" id="btn1" value="开始">
    <input type="button" id="btn2" value="停止">
  </div>

</div>

<script>

  $(function () {
    var cells = $("#namelist td"); // 获取所有单元格
    var startid;

    //开始按钮
    $("#btn1").click(function () {
      //处理按钮是否可使用
      $("#btn1").prop("disabled",true)
      $("#btn2").prop("disabled",false)
      startid=setInterval(function () {
        var randomIndex = Math.floor(Math.random() * cells.length);//生成与单元格长度一致的随机数
        var randomCell = $(cells[randomIndex]);
        cells.css("background","whitesmoke")//将所有单元格背景设置为初始背景颜色一致，如果不这么做，最后所有单元格都将变为黄色而无法区分随机单元格
        randomCell.css("background","yellow")//设置随机获取的单元格背景颜色
      },100)
    });

    //停止按钮
    $("#btn2").click(function () {
      //处理按钮是否可使用
      $("#btn1").prop("disabled",false)
      $("#btn2").prop("disabled",true)
      clearInterval(startid)//去除定时器
    });
  })
  
</script>

</body>
</html>