如何用JavaScript实现每月重置的日记账ID生成并填充至输入框

我来帮你搞定这个按月重置计数器的日记账ID需求！咱们把所有功能整合到一个JavaScript函数里，既能自动生成符合格式的ID，又能保证每月初计数器从零开始重置，页面加载时直接填充到输入框里。

完整实现代码 #

<input type="text" id="referenceNumber" readonly>

<script type="text/javascript">
function generateJournalId() {
    // 获取当前日期
    const todaydate = new Date();
    const month = todaydate.getMonth() + 1; // 月份从0开始，所以+1
    const year = todaydate.getFullYear();
    const currentMonthYear = `${month}/${year}`;

    // 从localStorage获取存储的计数器和月份年份，没有的话初始化
    let storedData = JSON.parse(localStorage.getItem('journalCounter')) || {
        counter: 1,
        monthYear: currentMonthYear
    };

    // 检查当前月份年份和存储的是否一致，不一致则重置计数器
    if (storedData.monthYear !== currentMonthYear) {
        storedData.counter = 1;
        storedData.monthYear = currentMonthYear;
    }

    // 生成三位补零的序号（比如1→001）
    const paddedCounter = storedData.counter.toString().padStart(3, '0');
    // 拼接完整的日记账ID
    const journalId = `JV${paddedCounter}/${month}/${year}`;

    // 更新localStorage里的计数器（下次加载时递增）
    storedData.counter += 1;
    localStorage.setItem('journalCounter', JSON.stringify(storedData));

    // 将ID填充到输入框
    document.getElementById("referenceNumber").value = journalId;
}

// 页面加载时执行函数
window.onload = generateJournalId;
</script>

代码说明 #

• 计数器持久化：用localStorage保存计数器和当前月份年份，这样页面刷新、关闭后再打开，计数器还能保持连续，跨月时自动重置为1。
• 补零处理：把计数器转为字符串后，用padStart(3, '0')确保序号是三位格式，比如1变成001、99变成099，完美匹配你要的JVXXX/M/YYYY格式。
• 自动填充：通过window.onload在页面加载完成后自动调用函数，直接把生成的ID填充到id="referenceNumber"的输入框里，不用手动触发。

测试场景验证 #

• 1月首次加载：生成JV001/1/2018，刷新页面后自动递增为JV002/1/2018，以此类推。
• 进入2月后首次加载：系统自动识别月份变化，重置计数器，生成JV001/2/2018，刷新后继续递增。

内容的提问来源于stack exchange，提问作者Golide