JS动态生成年份和月份实例代码

下面我将为你详细讲解JS动态生成年份和月份实例代码的完整攻略。

1. 使用方法说明

该代码实现的功能是通过JS生成一个下拉框，用于选择年份和月份。在使用该代码前，需要将以下代码拷贝到你的HTML文件中：

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

<!-- 引入CSS样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">

<!-- 引入JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- 创建年份和月份下拉框 -->
<div class="row">
    <div class="col-sm-6">
        <select class="js-example-basic-single form-control" id="year">
        </select>
    </div>
    <div class="col-sm-6">
        <select class="js-example-basic-single form-control" id="month">
        </select>
    </div>
</div>

生成的下拉框会分别对应两个id，一个为year，另一个为month。你可以通过修改id来修改下拉框的生成位置。

2. 实现过程说明

下面，我将分别演示如何通过JS动态生成年份和月份下拉框。

生成年份下拉框

JS生成年份下拉框的过程如下：

// 获取当前年份
var currentYear = new Date().getFullYear();
// 获取起始年份
var startYear = currentYear - 10;
// 获取结束年份
var endYear = currentYear + 10;

// 循环生成年份选项
for (var i = startYear; i <= endYear; i++) {
  // 创建option元素
  var option = $('<option></option>');
  // 设置option的值和文本
  option.val(i).text(i + '年');
  // 添加option到年份下拉框中
  $('#year').append(option);
}

// 设置年份下拉框的默认选项
$('#year').val(currentYear);

上述代码中，我们首先获取了当前年份，然后通过当前年份获取了起始年份和结束年份。接下来，我们通过循环生成option元素，设置其值和文本，最后添加到年份下拉框中。最后，我们将当前年份设置为默认选项。

生成月份下拉框

JS生成月份下拉框的过程如下：

// 循环生成月份选项
for (var i = 1; i <= 12; i++) {
  // 创建option元素
  var option = $('<option></option>');
  // 设置option的值和文本
  option.val(i).text(moment(i, 'MM').format('MMMM'));
  // 添加option到月份下拉框中
  $('#month').append(option);
}

// 设置月份下拉框的默认选项
$('#month').val(new Date().getMonth() + 1);

上述代码中，我们首先通过循环生成option元素，设置其值和文本。值为1~12，文本为对应的英文月份（例如：'1月'、'2月'、'3月'...）。最后，我们将当前月份设置为默认选项。

3. 示例演示

为了更好的理解代码的实现过程，我在下面提供了两个示例演示，你可以在代码实现过程中参考这两个示例：

• 生成年份下拉框示例
• 生成月份下拉框示例

4. 结语

至此，我已经为你讲解了JS动态生成年份和月份实例代码的完整攻略。在正式使用该代码前，请务必测试其在不同环境下的适用性。