js+css实现一个原生中性日历效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现一个原生中性日历效果代码，可切换月份、年份。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #2495f5;
  --br: 8px;
  --bs: 5px 5px 5px #e0e0e6, -5px -5px 5px #fff;
  --bs-inset: 5px 5px 5px #e0e0e6 inset, -5px -5px 5px #fff inset;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #edf0f5;
}
.calendar-wrap {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: var(--br);
  background-color: #edf0f5;
  box-shadow: var(--bs);
  cursor: pointer;
}

.calendar-header {
  display: flex;
  align-items: center;
}

.date-show {
  font-size: 20px;
  color: var(--primary-color);
  margin: 0 50px;
  font-weight: 600;
}

.btn {
  width: 45px;
  height: 45px;
  border-radius: var(--br);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #edf0f5;
  box-shadow: var(--bs);
}

.btn:hover {
  box-shadow: var(--bs-inset);
}

.btn.iconfont {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: bold;
}

.pre-month {
  margin-right: auto;
  margin-left: 10px;
}

.next-month {
  margin-left: auto;
  margin-right: 10px;
}
.table-wrap {
  margin-top: 10px;
  /* 设置单元格之间的间隔 */
  border-spacing: 15px;
}

.table-wrap th {
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  border-radius: var(--br);
  box-shadow: var(--bs);
  color: #fff;
  border: 2px solid #edf1f4;
}

.table-wrap td {
  font-weight: 500;
  font-size: 1.25rem;
  width: 50px;
  height: 50px;
  /* 水平居中文本 */
  text-align: center;
  /* 垂直居中内容 */
  vertical-align: middle;
  background-color: #edf1f4;
  border-radius: var(--br);
  box-shadow: var(--bs);
  color: #777;
}

/* 双类名增加权重 */
.table-wrap td.active.active {
  border: 2px solid #edf1f4;
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: var(--bs);
}

.table-wrap td:hover {
  box-shadow: var(--bs-inset);
}

.table-wrap td.not-month {
  color: #ccc;
  box-shadow: var(--bs);
}
</style>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3918133_k2xnhhtzck.css">

</head>

<body>
  <div class="container">
    <div class="calendar-wrap">
      <div class="calendar-header">
        <div class="btn pre-year iconfont icon-left-arrows"></div>
        <div class="btn pre-month iconfont icon-left-arrow"></div>
        <div class="date-show"></div>
        <div class="btn next-month iconfont icon-right-arrow"></div>
        <div class="btn next-year iconfont icon-right-arrows"></div>
      </div>
      <table class="table-wrap">
        <thead>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
  <script >
      /**
 * 获取指定月份的日历数据
 * @author coderjc <coderjc@qq.com>
 * @param {Number} year 年份(默认当前年份)
 * @param {Number} month 月份(默认当前月份)
 * @returns {Array} 返回一个指定月份的日历数组
 * @example
 * getCalendar(2023, 8) // 返回2023年8月的日历数组
 */
function getCalendar(year, month) {
	// 创建 date 对象实例
	const date = new Date()

	// 月份从 0 开始
	date.setFullYear(year)
	date.setMonth(month - 1)

	// 设置当月的第一天-即将日期设置为 1 号
	date.setDate(1)

	// 通过设置当月的第一天可以获取当前月的 1 号是周几
	const firstDay = date.getDay()

	// 获取当前月份的最大天数
	let curMaxMonthDays = getMaxDaysInMonth(year, month)

	// 获取上月的最大天数
	//  - 如果月份为1,则获取的上月天数为年份-1,月份12
	let preMonthDays = undefined
	if (month === 1) {
		preMonthDays = getMaxDaysInMonth(year - 1, 12)
	}
	// 否则正常获取
	else {
		preMonthDays = getMaxDaysInMonth(year, month - 1)
	}

	// 定义月数组
	const monthList = []

	// 本月初始天数值
	let count = 0

	// 下月初始天数值
	let nextCount = 0

	// 生成每月日历
	for (let i = 0; i < 6; i++) {
		// 生成每周的数据
		const weekList = new Array(7)
		monthList.push(weekList)
		// 当 i 为 0 表示是第一周的情况
		if (i === 0) {
			for (let j = firstDay; j < weekList.length; j++) {
				// 已知本月的第一天是周几，即可确定第一周的具体日期
				weekList[j] = {
					stage: 'cur',
					y: year,
					m: month,
					d: ++count
				}
			}
		}
		// 其余的也进行填值
		else {
			for (let j = 0; j < weekList.length; j++) {
				// 已知本月的第一天是周几，即可确定第一周的具体日期
				count++
				// 当这个天数超出本月最大天数的时候就填充下个月的天数
				if (count > curMaxMonthDays) {
					// 当月份数等于12时表示为下一年,则年份+1,月份重置为1
					if (month === 12) {
						weekList[j] = {
							stage: 'next',
							y: year + 1,
							m: 1,
							d: ++nextCount
						}
					}
					// 否则只执行月份+1
					else {
						weekList[j] = {
							stage: 'next',
							y: year,
							m: month + 1,
							d: ++nextCount
						}
					}
				}
				// 否则表示属于当前月
				else {
					weekList[j] = {
						stage: 'cur',
						y: year,
						m: month,
						d: count
					}
				}
			}
		}
	}

	// 填充第一周缺失的日期-即上月的末尾日期
	for (let i = firstDay - 1; i >= 0; i--) {
		let data = null
		// 如果当前月为1,则个月的填充数据年份需要-1,月份改为12
		if (month === 1) {
			data = {
				stage: 'pre',
				y: year - 1,
				m: 12,
				d: preMonthDays--
			}
		} else {
			data = {
				stage: 'pre',
				y: y.........完整代码请登录后点击上方下载按钮下载查看