JS实现简易日历效果

本文实例为大家分享了JS实现简易日历效果的具体代码，供大家参考，具体内容如下

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

js

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);
  }
 }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！