JavaScript 实现简易日历组件

JS 简易日历组件实现

本文分享了一段使用 JavaScript 实现简易日历功能的完整代码示例，供读者参考学习。

CSS 样式部分

* {
  margin: 0;
  padding: 0;
  list-style: none;
 }

 #box {
  width: 280px;
  height: 360px;
  margin: 50px auto;
  background-color: black;
  color: aliceblue;
  line-height: 40px;
 }

 #header {
  height: 40px;
  color: aliceblue;
  line-height: 40px;
 }

 #header span {
  float: left;
  text-align: center;
  margin-top: 10px;
  line-height: 40px;
 }

 #prev,
 #next {
  width: 20%;
  line-height: 40px;
  cursor: pointer;
 }

 #current {
  width: 60%;
  line-height: 40px;
 }

 #week li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
 }

 #content li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
}

HTML 结构部分

<div id="box">
 <div id="header">
  <span id="prev">上</span>
  <span id="current"></span>
  <span id="next">下</span>
 </div>
 <ul id="week">
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
 </ul>
 <ul id="content">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

JavaScript 逻辑部分

var current = document.querySelector('#current');//月份name
 var prev = document.querySelector('#prev'); // 上个月
 var next = document.querySelector('#next'); // 下个月
 var content = document.querySelector('#content'); // 日期内容

 // 上个月要显示的天数
 // 求出本月第一天是星期几
 // 求出上个月最大的天数 把日期设为0
 function getPrevDays(date) {
  var date = new Date(date);
  // 把日期设为第一天，为了获取第一天是星期几
  date.setDate(1);
  var week = date.getDay();
  // 把日期设为0，为了得到上个月的最后一天
  date.setDate(0);
  var maxDay = date.getDate();
  var list = [];
  // 遍历红色日期的范围 push进数组
  for (var i = maxDay - week + 1; i <= maxDay; i++) {
  list.push(i);
  }
  return list;
 }


 // 求本月的天数
 // 月份推到下个月
 // 日期设为0
 function getNowDays(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  var maxDay = date.getDate();
  // console.log(maxDay)
  var list = [];
  // 
  for (var i = 1; i <= maxDay; i++) {
  list.push(i)
  }
  return list;
 }



 // 下个月要显示的天数
 function getNextDays(prevDays, nowDays) {
  var list = [];
  // 一页日历42天，42 - 上月天数 - 这个月天数 = 最后显示剩余的下个月天数
  for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  list.push(i)
  }
  return list
 }

 var x = 1;
 // 封装输出日期内容
 // x记录点击月份 根据月份 上面数组自动获取当月要显示的时间
 function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // console.log(arr2);
  var res = '';
  for (var i = 0; i < arr1.length; i++) {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

  for (var i = 0; i < arr2.length; i++) {
  res += '<li>';
  res += arr2[i];
  res += '</li>';
  }

  for (var i = 0; i < arr3.length; i++) {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // 三个数组输出结果拼接起来 输出
  return content.innerHTML = res;
 }




 // 输出月份显示
 var date = new Date();
 current.innerHTML = showMonth(new Date());
 // 月份
 function showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  return (mon + 1) + '月';
 }

 output(x);
 // 下个月
 next.onclick = function () {
  x++;
  // console.log(x);
  if (x > 12) {
  x = 1;
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

 // 上个月
 prev.onclick = function () {
  x--;
  console.log(x);
  if (x < 1) {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

以上内容即为该简易日历功能的完整实现，希望能为读者的学习提供辅助，同时也欢迎读者继续支持本站获取更多技术资源。