本文章详细的介绍了关于如何利用js来实现calendar日历的方法，有需要的同学可以参考一下日历的使用方法哦，好了费话不说多了喜欢的就来看看吧。
一步一步理解日历calendar(一)描述画出日历这张表格；
一步一步理解日历calendar(二)增加了上一年、下一年、上一月、下一月的功能；
一步一步理解日历calendar(三)采用了面向对象的方式表现出来
功能介绍：
1、上一年、下一年、上一月、下一月、今天，功能相对简单。
2、当天日期着重显示。
效果图如下：
| 代码如下 |
|
|
//判断是否为闰年
function isLeapYear(year) {
if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) {
return true;
}
else {
return false;
}
}
//每月的天数
function maxDayOfDate(year, month) {
if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 == month) {
return 31;
}
else if (4 == month || 6 == month || 9 == month || 11 == month) {
return 30;
}
else {
if (isLeapYear(year)) {
return 29;
}
else {
return 28;
}
}
}
// d是日期类型 返回每月的第一天
function getStartDate(d) {
d.setDate(1);
return d;
}
// d是日期类型 返回每月的最后一天
function getEndDate(d) {
var totalDays = maxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
d.setDate(totalDays);
return d;
}
//创建Calender类
function Calender(obj) {
this.obj = mid = obj;
this.obj.innerHTML = this.createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
Calender.prototype = {
createCalender: function (start, end) {
var html = "<table class='calendar' border='1px' cellpadding='0' cellspacing='0'><thead>"
+ "<tr><th colspan='7'><input type='button' value='上年' onclick='preYear()' />" + y + "<input type='button' value='上年' onclick='nextYear()' />"
+ "<input type='button' value='上月' onclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' onclick='nextMonth()' />"
+ "<input type='button' value='今天' onclick='today()'></th></tr>"
+ "<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
var days = end.getDate();
var week = start.getDay() == 0 ? 7 : start.getDay();
var tmpd = new Date();
day = tmpd.getDate();
for (var i = 1; i <= 42; i++) {
if (1 == i % 7 || 1 == i) {
html += "<tr>";
}
if (i >= week && i <= (week + days - 1)) {
if (day == (i - week + 1)) {
if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
html += "<td class='today'>" + day + "</td>";
}
else {
html += "<td >" + day + "</td>";
}
} else if (day < i - week + 1) {
html += "<td>" + parseInt(i - week + 1) + "</td>";
}
else {
html += "<td>" + parseInt(i - week + 1) + "</td>";
}
if (7 == i % 7 || 7 == i) {
html += "</tr>";
}
}
else {
html += "<td> </td>";
}
}
html += "</table>";
return html;
}
}
|
完整实例
| 代码如下 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一步一步理解日历calendar（三）</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.calendar{text-align: center;border-width: thin;}
.calendar th{background-color: #6666FF;}
.calendar .today{background-color: Orange;color: Red;font-weight: bold;}
</style>
<script type="text/javascript">
function isLeapYear(year) {
if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) {
return true;
}
else {
return false;
}
}
function maxDayOfDate(year, month) {
if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 == month) {
return 31;
}
else if (4 == month || 6 == month || 9 == month || 11 == month) {
return 30;
}
else {
if (isLeapYear(year)) {
return 29;
}
else {
return 28;
}
}
}
function getStartDate(d) {
d.setDate(1);
return d;
}
function getEndDate(d) {
var totalDays = maxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
d.setDate(totalDays);
return d;
}
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
var mid;
function Calender(obj) {
this.obj = mid = obj;
this.obj.innerHTML = this.createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
Calender.prototype = {
createCalender: function (start, end) {
var html = "<table class='calendar' border='1px' cellpadding='0' cellspacing='0'><thead>"
+ "<tr><th colspan='7'><input type='button' value='上年' onclick='preYear()' />" + y + "<input type='button' value='上年' onclick='nextYear()' />"
+ "<input type='button' value='上月' onclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' onclick='nextMonth()' />"
+ "<input type='button' value='今天' onclick='today()'></th></tr>"
+ "<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
var days = end.getDate();
var week = start.getDay() == 0 ? 7 : start.getDay();
var tmpd = new Date();
day = tmpd.getDate();
for (var i = 1; i <= 42; i++) {
if (1 == i % 7 || 1 == i) {
html += "<tr>";
}
if (i >= week && i <= (week + days - 1)) {
if (day == (i - week + 1)) {
if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
html += "<td class='today'>" + day + "</td>";
}
else {
html += "<td >" + day + "</td>";
}
} else if (day < i - week + 1) {
html += "<td>" + parseInt(i - week + 1) + "</td>";
}
else {
html += "<td>" + parseInt(i - week + 1) + "</td>";
}
if (7 == i % 7 || 7 == i) {
html += "</tr>";
}
}
else {
html += "<td> </td>";
}
}
html += "</table>";
return html;
}
}
function preYear() {
y = y - 1;
new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
function nextYear() {
y = y + 1;
new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
function preMonth() {
m = m - 1;
if (-1 == m) {
y = y - 1;
m = 11;
}
new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
function nextMonth() {
m = m + 1;
if (12 == m) {
y = y + 1;
m = 0;
}
new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
}
function today() {
y = new Date().getFullYear();
m = new Date().getMonth();
new Calender(mid).createCalender(getStartDate(new Date()), getEndDate(new Date()));
}
window.onload = function () {
new Calender(document.getElementById("canlendar"));
}
</script>
</head>
<body>
<div id="canlendar">
</div>
</body>
</html>
|
