Question

这是一个基本的日历项目，我希望按钮能显示几个月。

该按钮适用于console.log，因此我的匿名功能肯定有问题

const today = new Date();
const calMonth = today.getMonth();
document.querySelector("button").addEventListener("click", event => {calMonth--});

CodePen上的全部内容：
https://codepen.io/CoCedric/pen/KGNWgy

Answer 1

您单击上一个/下一个按钮的代码仅设置calMonth的值。另外，请注意，calMonth被声明为const，这意味着您无法更改其值。

这是您可以做的：

将const更改为let

包装用于设置getHead的innerHTML并将代码呈现为函数的代码。

function renderCalendar() {
  getHead.innerHTML = monthFran[calMonth];
  for (let i in allDays) {
    let printedDay = i - calDate.getDay();
    allDays[i].innerHTML = (printedDay < 1 || printedDay > monthEnd[calMonth]) ? "" : printedDay;
  }
}

在单击上一个/下一个按钮时以及在代码末尾以显示日期时调用该函数。

document.querySelectorAll('button').forEach((btn) => {
  btn.addEventListener('click', (e) => {
    if (e.target.classList.contains('bak')) {
      calMonth--;
    } else {
      calMonth++;
    }

    renderCalendar();
  });
});

renderCalendar();

当然，该解决方案并没有以任何方式完善/优化，只是让您知道自己可以做什么。

基本的HTML日历搞砸了

1 个答案: