JS日历

效果图

原理

利用Date()方法获取系统时间，制作万年历。
getFullYear()获取年
getMonth()获取月
getDate()获取日
getDay()获取星期

实现

<div class="rili" style="user-select: none">
      <div id="top">
        <span onclick="pre()" id="pre" style="cursor: pointer">&lt;</span>
        <span id="date"></span>
        <span onclick="next()" id="next" style="cursor: pointer">&gt;</span>
      </div>
      <div class="week">
        <ul class="ch">
          <li><span>周日</span><br /><span>SUN</span></li>
          <li><span>周一</span><br /><span>MON</span></li>
          <li><span>周二</span><br /><span>TUE</span></li>
          <li><span>周三</span><br /><span>WED</span></li>
          <li><span>周四</span><br /><span>THU</span></li>
          <li><span>周五</span><br /><span>FRI</span></li>
          <li><span>周六</span><br /><span>SAT</span></li>
        </ul>
      </div>
      <div class="day">
        <ul>
          <li></li><!--li用来动态添加日期-->
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <script src="rili.js"></script>

* {
        margin: 0%;
        padding: 0%;
      }
      body {
        width: 100%;
        height: 100%;
      }
      li {
        list-style: none;
      }
 
      input {
        outline: none;
        border: none;
        color: #ccc;
      }
      input::placeholder {
        text-indent: 1em;
        color: #484848;
      }
      .rili {
        font-family: Arial, Helvetica, sans-serif;
        width: 336px;
        margin: 10px auto;
        text-align: center;
        z-index: 50;
        box-shadow: 0 0 10px #333;
        display: block;
        border-radius: 10px;
        overflow: hidden;
      }
      .rili #top {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        display: block;
        background: #009aed;
        height: 40px;
        width: 100%;
        color: #fff;
        line-height: 40px;
      }
      .top span {
        color: #fff;
        display: inline-block;
        line-height: 40px;
      }
      #date {
        width: 100px;
        display: inline-block;
      }
      .week ul {
        display: block;
        width: 336px;
        display: flex;
        justify-content: space-evenly;
      }
      .ch li {
        float: left;
        font-size: 15px;
      }
      .ch li span {
        color: #fff;
        font-size: 14px;
      }
      .week {
        background-color: #15aafc;
      }
      .day > ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        align-content: space-around;
        height: 200px;
      }
      .day li {
        width: 45px;
      }
      .day {
        background-color: #fff;
      }

var input = document.getElementById('input');
var now_Date = document.getElementById('date');
var day = document.getElementsByClassName('day')[0];
var day_ul = day.children[0];
var day_li = day_ul.children;
var data = new Date();
var now_Y = data.getFullYear(); //获取当前年

/*getMonth()的一月等于0，所以我们需要给获取到的月份+1后
再添加到HTML文档结构中去，这样才符合人类的习惯。*/
var now_M = data.getMonth() + 1; //获取当前月
var now_D = data.getDate(); //获取当前日
now_Date.innerHTML = now_Y + '年' + now_M + '月';

//当前显示的日历
function now() {
  for (var i = 0; i < 42; i++) {
    day_li[i].innerHTML = ''; //给每个li清空内容，防止日历翻页时残留着上一个月的一些日期信息
  }
  now_firstday = new Date(now_Y, now_M, 1).getDay(); //获取当前月份第一天星期几
  now_totalday = new Date(now_Y, now_M, 0).getDate(); //获取当前月份天数
  console.log('当前月份:' + now_M);
  console.log('当前月份总天数:' + now_totalday);
  console.log('当前月份第一天星期' + now_firstday);
  // 当该月第一天为星期天时
  if (now_firstday == 0) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期一时
  if (now_firstday == 1) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期二时
  if (now_firstday == 2) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期三时
  if (now_firstday == 3) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期四时
  if (now_firstday == 4) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期五时
  if (now_firstday == 5) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
  // 当该月第一天为星期六时
  if (now_firstday == 6) {
    for (var i = 0; i < now_totalday; i++) {
      day_li[now_firstday].innerHTML = i + 1;
      now_firstday++;
      console.log(now_totalday);
    }
  }
}
//往前翻一个月
function pre() {
  now_M--; //月份-1
  if (now_M == 0) {
    now_M = 12;
    now_Y--;
  }
  now_Date.innerHTML = now_Y + '年' + now_M + '月';
  now();
}
//往后翻一个月
function next() {
  now_M++; //月份+1
  if (now_M == 13) {
    now_M = 1;
    now_Y++;
  }
  now_Date.innerHTML = now_Y + '年' + now_M + '月';
  now();
}

window.onload = function () {
  now();
};