JavaScript实现自定义样式日历

为了让自己更加熟练JavaScript中的Date()对象，制作了一个简单的自定义样式日历。

在线查看

JavaScript实现自定义样式日历

代码

HTML

<div class="calendar">
  <div id="now">
    <p class="time">
      <span id="hour"></span>:<span id="minute"></span>:<span id="seconds"></span>
    </p>
    <p class="date">
      <span id="year"></span> 年 <span id="month"></span> 月 <span id="day"></span> 日  星期<span id="week"></span><span id="today">Today</span>
    </p>
  </div>
  <div id="calendar">
    <span id="selMonth"></span>&nbsp;
    <span id="selYear"></span>
    <div class="arrow">
      <span type="button" id="lastMonth"><</span>
      <span type="button" id="nextMonth">></span>
    </div>
    <ul>
      <li>Su</li>
      <li>Mo</li>
      <li>Tu</li>
      <li>We</li>
      <li>Th</li>
      <li>Fr</li>
      <li>Sa</li>
    </ul>
    <div id="days"></div>
  </div>
</div>

JavaScript

window.onload = function() {
  var hour = document.getElementById("hour")
  var minute = document.getElementById("minute")
  var seconds = document.getElementById("seconds")
  var year = document.getElementById("year")
  var month = document.getElementById("month")
  var day = document.getElementById("day")
  var week = document.getElementById("week")
  var days = document.getElementById("days");
  var selYear = document.getElementById("selYear");
  var selMonth = document.getElementById("selMonth");
  var lastMonth = document.getElementById("lastMonth");
  var nextMonth = document.getElementById("nextMonth");
  var today = document.getElementById("today");
  var d = new Date();
  getTime();
  setInterval(getTime, 1000)

  function getTime() {
    var d = new Date();
    year.innerHTML = d.getFullYear();
    month.innerHTML = format(d.getMonth() + 1);
    day.innerHTML = format(d.getDate());
    week.innerHTML = formatWeek(d.getDay());
    hour.innerHTML = format(d.getHours());
    minute.innerHTML = format(d.getMinutes());
    seconds.innerHTML = format(d.getSeconds());
  }

  function format(v) {
    return v < 10 ? "0" + v : "" + v
  }

  function formatWeek(v) {
    return ['日', '一', '二', '三', '四', '五', '六'][v]
  }

  function formatMonth(v) {
    return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][v]
  }

  function getEndDay(year, month) {
    return new Date(year, month, 0).getDate();
  }

  function getWeek(year, month) {
    return new Date(year, month, 1).getDay();
  }

  function chageMonth() {
    var lastEndDay = getEndDay(d.getFullYear(), d.getMonth()); //上月最后一天
    var currEndDay = getEndDay(d.getFullYear(), d.getMonth() + 1); //本月最后一天
    var weekFirstDay = getWeek(d.getFullYear(), d.getMonth()) //本月第一天周几

    var nextMonthDay = 1;

    var yearStr = "";
    var monthStr = "";
    var daysStr = "";
    yearStr = d.getFullYear();
    monthStr = formatMonth(d.getMonth());
    weekFirstDay = weekFirstDay == 0 ? 7 : weekFirstDay;
    for(var i = 0; i < 42; i++) {
      if(i < weekFirstDay) {
        daysStr = "<span class='gray'>" + (lastEndDay--) + "</span>" + daysStr;
      } else if(i >= weekFirstDay + currEndDay) {
        daysStr += "<span class='gray'>" + (nextMonthDay++) + "</span>";
      } else {
        var active = (i - weekFirstDay + 1) == d.getDate() ? "active" : ""
        daysStr += "<span class=" + active + ">" + (i - weekFirstDay + 1) + "</span>"
      }
    }
    days.innerHTML = daysStr;
    selYear.innerHTML = yearStr;
    selMonth.innerHTML = monthStr;
  }

  function compareDate() {
    if((d.getMonth() + 1) != parseInt(month.innerHTML) || (d.getFullYear()) != parseInt(year.innerHTML)) {
      d.setDate(1)
    } else {
      d.setDate(parseInt(day.innerHTML))
    }
  }

  chageMonth();

  lastMonth.onclick = function() {
    d.setMonth(d.getMonth() - 1);
    compareDate();
    chageMonth();
  }
  nextMonth.onclick = function() {
    d.setMonth(d.getMonth() + 1);
    compareDate();
    chageMonth();
  }

  today.onclick = function() {
    d.setFullYear(parseInt(year.innerHTML));
    d.setMonth(parseInt(month.innerHTML) - 1);
    compareDate();
    chageMonth();
  }

}

CSS

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

body {
  background: #a396b0 url(img/bg.jpg);
  color: #626c75;
}

#today {
  cursor: pointer;
  float: right;
  border-bottom: 1px solid #989b9f;
}

#now .time {
  font-size: 48px;
}

#now .date {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 20px;
}

.calendar {
  width: 350px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

#calendar {
  position: relative;
  text-align: center;
  font-size: 24px;
  line-height: 40px;
}

#calendar ul {
  margin-top: 10px;
}

#calendar li {
  width: 40px;
  height: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
  color: #404850;
  margin: 5px;
  font-size: 18px;
}

#days {
  width: 350px;
}

#calendar #days span {
  float: left;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin: 5px;
  font-size: 16px;
}

#calendar #days span.active {
  border-radius: 50%;
  background: #f88699;
  color: #FFFFFF;
}

#calendar #days span:hover {
  border-radius: 50%;
  background: #f88699;
  color: #FFFFFF;
}

.gray {
  opacity: 0.5;
}

.arrow span {
  display: block;
  color: #989b9f;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 2;
}

#lastMonth {
  left: 0;
}

#nextMonth {
  right: 0;
}

.arrow span {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}