详解js中常规日期格式处理、月历渲染和倒计时函数

下面将为您详细讲解js中常规日期格式处理、月历渲染和倒计时函数的完整攻略。

常规日期格式处理

在JavaScript中，我们可以使用Date对象对日期进行处理。常用的日期格式处理函数包括getFullYear()、getMonth()、getDate()、getDay()等。这些函数用于获取年、月、日、星期几等常用日期信息。比如，我们可以使用以下代码获取当前日期：

const currentDate = new Date();
const year = currentDate.getFullYear(); // 获取当前年份
const month = currentDate.getMonth() + 1; // 获取当前月份（由于getMonth函数返回的是0-11，所以需要加1）
const date = currentDate.getDate(); // 获取当前日期
const day = currentDate.getDay(); // 获取当前星期几

月历渲染

在前端开发中，经常需要显示一整个月的日期。为了方便地实现这个功能，我们可以编写一个函数来根据当前月份来渲染整月日期，如下所示：

function renderCalendar(year, month) {
  const firstDay = new Date(year, month - 1, 1).getDay(); // 当月1日是星期几
  const daysInMonth = new Date(year, month, 0).getDate(); // 当月天数
  const calendarSpreadsheet = []; // 存储格式为一维的所有日期

  // 将日历表合并成一维数组
  for (let i = 0; i < firstDay; i++) {
    calendarSpreadsheet.push("");
  }

  for (let i = 1; i <= daysInMonth; i++) {
    calendarSpreadsheet.push(i);
  }

  // 将一维数组转化为二维数组，每行7个元素
  const calendar = [];
  let week = [];

  for (let i = 0; i < calendarSpreadsheet.length; i++) {
    week.push(calendarSpreadsheet[i]);

    if (week.length === 7) {
      calendar.push(week);
      week = [];
    }
  }

  // 渲染月历
  const renderedCalendar = `<table>
                              <thead>
                                <tr>
                                  <th>周日</th>
                                  <th>周一</th>
                                  <th>周二</th>
                                  <th>周三</th>
                                  <th>周四</th>
                                  <th>周五</th>
                                  <th>周六</th>
                                </tr>
                              </thead>
                              <tbody>
                                ${calendar
                                  .map(
                                    (week) =>
                                      `<tr>${week
                                        .map(
                                          (day) =>
                                            `<td>${
                                              day === "" ? "" : day
                                            }</td>`
                                        )
                                        .join("")}</tr>`
                                  )
                                  .join("")}
                              </tbody>
                            </table>`;

  return renderedCalendar;
}

该函数接收两个参数：年份和月份。它首先获取当月1日是星期几以及当月的天数，然后将这些日期存储到一个一维数组中。接下来，将一维数组转化为二维数组，每行7个元素，再利用map函数进行渲染，最终返回一个渲染好的月历表。

下面是一个示例：

const year = 2021;
const month = 11; // 11月份，即12月份
const calendar = renderCalendar(year, month);

document.getElementById("calendar").innerHTML = calendar;

倒计时函数

在一些应用场景中，我们需要实现倒计时的功能。比如，某个活动从现在开始还有多少时间结束。以下是一个可以实现倒计时的函数：

function countdown(endTime) {
  const endTimeInMs = new Date(endTime).getTime();
  const now = new Date().getTime();
  const distance = endTimeInMs - now;
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  return {
    days,
    hours,
    minutes,
    seconds,
  };
}

该函数接收一个结束时间作为参数，将该时间转化为毫秒数，然后计算距离结束时间还有多长时间，返回剩余的天数、小时数、分钟数、秒数。可以利用该函数渲染倒计时页面。

以下是一个示例：

const endTime = "2021-12-31 23:59:59";
const remainingTime = countdown(endTime);

document.getElementById("countdown").innerHTML = `距离活动结束还剩${remainingTime.days}天${remainingTime.hours}小时${remainingTime.minutes}分钟${remainingTime.seconds}秒`;

以上是关于js中常规日期格式处理、月历渲染和倒计时函数的完整攻略，希望能够对您有所帮助。