jQuery实现简单日历效果

下面为大家详细讲解如何使用jQuery实现简单日历效果。

1. 准备工作

在开始之前，需要准备好以下的工作：

引入jQuery库

在页面中引入jQuery库，可以使用cdn加速库的方式，例如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

创建日历容器

在HTML中创建日历容器，例如：

<div id="calendar"></div>

2. 实现日历功能

步骤如下：

2.1 获取当月天数

使用JavaScript的Date对象获取当前月份的天数，代码如下：

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var days = new Date(year, month, 0).getDate();

2.2 生成日历表格

根据获取到的当月天数，生成对应的日历表格，代码如下：

var tableHtml = "<table><tr>";

for (var i = 1; i <= days; i++) {
  // 判断日期是否为星期天，如果是，则换行
  var weekDay = new Date(year + '-' + month + '-' + i).getDay();
  if (weekDay == 0) {
    tableHtml += "</tr><tr>";
  }

  // 生成单元格，把日期输出到单元格中
  tableHtml += "<td>" + i + "</td>";
}

tableHtml += "</tr></table>";

2.3 将日历表格渲染到页面中

通过jQuery的append方法将生成的日历表格渲染到页面中，代码如下：

$('#calendar').append(tableHtml);

3. 完整代码示例

下面是一个完整的使用jQuery实现简单日历效果的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现简单日历效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid #ccc;
      width: 50px;
      height: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="calendar"></div>
  <script>
    $(function() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var days = new Date(year, month, 0).getDate();

      var tableHtml = "<table><tr>";

      for (var i = 1; i <= days; i++) {
        var weekDay = new Date(year + '-' + month + '-' + i).getDay();
        if (weekDay == 0) {
          tableHtml += "</tr><tr>";
        }
        tableHtml += "<td>" + i + "</td>";
      }

      tableHtml += "</tr></table>";

      $('#calendar').append(tableHtml);
    });
  </script>
</body>
</html>

4. 示例说明

下面是两个使用jQuery实现简单日历效果的示例说明。

示例1

实现一个简单的日期选择器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>日期选择器示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid #ccc;
      width: 50px;
      height: 50px;
      text-align: center;
      cursor: pointer;
    }
    td:hover {
      background-color: #ccc;
    }
    .active {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <input type="text" id="datepicker">
  <div id="calendar"></div>

  <script>
    $(function() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var days = new Date(year, month, 0).getDate();

      var tableHtml = "<table><tr>";

      for (var i = 1; i <= days; i++) {
        var weekDay = new Date(year + '-' + month + '-' + i).getDay();
        if (weekDay == 0) {
          tableHtml += "</tr><tr>";
        }
        tableHtml += "<td>" + i + "</td>";
      }

      tableHtml += "</tr></table>";

      $('#calendar').append(tableHtml);

      $('#calendar td').click(function() {
        $('#calendar td').removeClass('active');
        $(this).addClass('active');
        var dateValue = year + '-' + month + '-' + $(this).html();
        $('#datepicker').val(dateValue);
      });
    });
  </script>
</body>
</html>

在该示例中，新增了一个输入框用于选择日期。点击输入框会弹出日历，点击日历中的日期会将所选的日期显示在输入框中。

示例2

在一个博客网站中，展示当月的文章发布日期。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>博客文章列表示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid #ccc;
      width: 50px;
      height: 50px;
      text-align: center;
    }
    .today {
      background-color: #ccc;
    }
    .post-date {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <h1>2021年5月文章列表</h1>
  <table>
    <thead>
      <tr>
        <th>日期</th>
        <th>标题</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="post-date">05-01</span></td>
        <td><a href="#">文章标题1</a></td>
      </tr>
      <tr>
        <td><span class="post-date">05-08</span></td>
        <td><a href="#">文章标题2</a></td>
      </tr>
      <tr>
        <td><span class="post-date">05-15</span></td>
        <td><a href="#">文章标题3</a></td>
      </tr>
      <tr>
        <td><span class="post-date today">05-22</span></td>
        <td><a href="#">文章标题4</a></td>
      </tr>
      <tr>
        <td><span class="post-date">05-29</span></td>
        <td><a href="#">文章标题5</a></td>
      </tr>
    </tbody>
  </table>

  <script>
    $(function() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var days = new Date(year, month, 0).getDate();

      var tableHtml = "<table><tr>";

      for (var i = 1; i <= days; i++) {
        var weekDay = new Date(year + '-' + month + '-' + i).getDay();
        if (weekDay == 0) {
          tableHtml += "</tr><tr>";
        }
        var className = "";
        if (i == date.getDate()) {
          className = "today";
        }
        tableHtml += '<td><span class="post-date ' + className + '">' + month + '-' + i + '</span></td>';
      }

      tableHtml += "</tr></table>";

      $('h1').after(tableHtml);
    });
  </script>
</body>
</html>

在该示例中，根据当前月份生成了一个日历表格，每个单元格中显示当天日期的日期和文章列表中的标题。如果当天是当前浏览的月份，则该单元格会被标记为今天。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现简单日历效果 - Python技术站