js 实现日历效果
2013-01-20 00:30
429 查看
许久没有写过小例子的代码了，今天有个朋友让我用js帮他做一个日历。实现基本的日历功能，很可惜，本人对jquary等技术一直都不感兴趣，也因是做后台开发，很少写前台代码，但朋友相求，不得不帮，于是乎写了一个小实例，给大家分享下（因为他要的很急，时间不是很充裕，没有做代码重构及样式添加，仅仅是个小框架，勿喷）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
// 当文档加载完成时，执行方法。
window.ready = createCalendar;
// 定义显示星期数组
var weekArray = ["Sun","Mon","Tue","Web","Thu","Fri","Sat"];
// 定义显示月份数组（程序中没有用，但可以替换）
var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// 定义月份天数数组
var daysOfMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
// 定义两个calendar的不同标示
var marks = ["main","bak"];
// 初始化calendar
document.ready(init());
// 监听last事件
function backMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]-2);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 监听next事件
function nextMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 初始化calendar
function init(){
var time = new Date();
createCalendar(time,true,marks[0]);
document.writeln("===========================");
var time2 = new Date();
time2.setMonth(time.getMonth()+1);
createCalendar(time2,false,marks[1]);
}
// 创建Calendar
function createCalendar(time,flag,mark){
var calender_rows = getMonthCalenderValue(time,mark);
document.writeln("<table border=\"1\">");
for(var row = 0 ; row < 8 ; row ++){
document.write("<tr>");
for(var col = 0 ; col < (calender_rows[row]).length; col++){
// 初始化各行
if(row == 0){
if(col!=1 && !flag){
continue;
}
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}else if(row == 1){
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln(weekArray[col]);
document.writeln("</td>");
}else{
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" onClick=\""+mark+"DateTime(this)\">");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}
}
document.writeln("</tr>");
}
document.writeln("</table>");
}
// 监听改变calendar事件
function changeCalendar(mark,year,month){
// 处理月份 和 年份的关系
if(month >= 12){
year++ ;
month = 0 ;
}else if(month < 0){
year-- ;
month = 11 ;
}
var time = new Date(year,month);
//得到新的月份数据
var calender_rows = getMonthCalenderValue(time,mark);
//填充日历单元格
fillCell(calender_rows,mark);
//更改月视图
document.getElementById(mark+"_calenderTime").value = year+"-"+(time.getMonth()+1);
}
// 填充日历单元格
function fillCell(calender_rows,mark){
for(var row = 2 ; row < 8 ; row ++){
for(var col = 0 ; col < 7 ; col++){
document.getElementById(mark+"_"+row+"_"+col).innerText = (calender_rows[row])[col];
}
}
}
// 得到calendar的所有数据
function getMonthCalenderValue(time,mark){
var calender_rows = new Array();
calender_rows[0] = getFirstRowUi(time,mark);
calender_rows[1] = weekArray;
// 得到具体日期数据
getShowMonthValues(calender_rows,time.getYear(),time.getMonth());
return calender_rows;
}
//得到该月所有日期数据
function getShowMonthValues(calender_rows,year,month){
var monthTop = new Date(year,month);
var currendMonthTopDay = monthTop.getDay();
// 判断是否是闰年二月
if(month == 1 && ((year%4 == 0 && year %100 != 0)||year%400==0)){
daysOfMonth[month] = 29;
}
var days = daysOfMonth[month];
var count = 1;
var startFlag = false;
// 得到填充数据
for(var row = 2 ; row < 8 ; row ++){
(calender_rows[row]) = ["","","","","","",""];
for(var col = 0 ; col < 7 ; col++){
if( !startFlag && col == currendMonthTopDay ){
(calender_rows[row])[col] = count.toString();
startFlag = true;
count++;
}else if(startFlag && count <= days){
(calender_rows[row])[col] = count.toString();
count++;
}
}
}
}
// 得到填充第一行数据
function getFirstRowUi(time,mark){
var month = (time.getMonth() + 1);
month = month < 10 ? "0"+month : month;
var day = time.getDate();
day = day < 10 ? "0"+day : day;
var first_values = [
"<a onclick=\"backMonth();\">last< /a>",
"<input type=\"text\" id=\""+mark+"_calenderTime\" value=\""+time.getYear()+"-"+month+"-"+day+"\"/>",
"<a onclick=\"javascript:nextMonth();\">next</a>"
];
return first_values;
}
// 处理上面表格点击事件
function mainDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
// 得到table元素
var table = obj.parentNode.parentNode.parentNode;
// 得到input元素
var sceneName = table.rows[0].cells[1].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);
}
// 处理下面表格点击事件，具体步骤如上
function bakDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
var table = obj.parentNode.parentNode.parentNode;
var sceneName = table.rows[0].cells[0].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);;
}
</script>
</head>
<body>
</body>
</html>
此实例中，上面的calendar是当前月的，下面的calendar是下个月的。程序中实现了last，next的功能，并处理了日期点击事件。但还有很多小bug，愿大家勿喷，只是个框架而已。
代码以共享，希望大家学习愉快。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
// 当文档加载完成时，执行方法。
window.ready = createCalendar;
// 定义显示星期数组
var weekArray = ["Sun","Mon","Tue","Web","Thu","Fri","Sat"];
// 定义显示月份数组（程序中没有用，但可以替换）
var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// 定义月份天数数组
var daysOfMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
// 定义两个calendar的不同标示
var marks = ["main","bak"];
// 初始化calendar
document.ready(init());
// 监听last事件
function backMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]-2);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 监听next事件
function nextMonth(){
var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
var yearMonthDate = calenderTime.split("-");
var year = parseInt(yearMonthDate[0]);
var month = parseInt(yearMonthDate[1]);
changeCalendar(marks[0],year,month);
changeCalendar(marks[1],year,month+1);
}
// 初始化calendar
function init(){
var time = new Date();
createCalendar(time,true,marks[0]);
document.writeln("===========================");
var time2 = new Date();
time2.setMonth(time.getMonth()+1);
createCalendar(time2,false,marks[1]);
}
// 创建Calendar
function createCalendar(time,flag,mark){
var calender_rows = getMonthCalenderValue(time,mark);
document.writeln("<table border=\"1\">");
for(var row = 0 ; row < 8 ; row ++){
document.write("<tr>");
for(var col = 0 ; col < (calender_rows[row]).length; col++){
// 初始化各行
if(row == 0){
if(col!=1 && !flag){
continue;
}
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}else if(row == 1){
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");
document.writeln(weekArray[col]);
document.writeln("</td>");
}else{
document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" onClick=\""+mark+"DateTime(this)\">");
document.writeln((calender_rows[row])[col]);
document.writeln("</td>");
}
}
document.writeln("</tr>");
}
document.writeln("</table>");
}
// 监听改变calendar事件
function changeCalendar(mark,year,month){
// 处理月份 和 年份的关系
if(month >= 12){
year++ ;
month = 0 ;
}else if(month < 0){
year-- ;
month = 11 ;
}
var time = new Date(year,month);
//得到新的月份数据
var calender_rows = getMonthCalenderValue(time,mark);
//填充日历单元格
fillCell(calender_rows,mark);
//更改月视图
document.getElementById(mark+"_calenderTime").value = year+"-"+(time.getMonth()+1);
}
// 填充日历单元格
function fillCell(calender_rows,mark){
for(var row = 2 ; row < 8 ; row ++){
for(var col = 0 ; col < 7 ; col++){
document.getElementById(mark+"_"+row+"_"+col).innerText = (calender_rows[row])[col];
}
}
}
// 得到calendar的所有数据
function getMonthCalenderValue(time,mark){
var calender_rows = new Array();
calender_rows[0] = getFirstRowUi(time,mark);
calender_rows[1] = weekArray;
// 得到具体日期数据
getShowMonthValues(calender_rows,time.getYear(),time.getMonth());
return calender_rows;
}
//得到该月所有日期数据
function getShowMonthValues(calender_rows,year,month){
var monthTop = new Date(year,month);
var currendMonthTopDay = monthTop.getDay();
// 判断是否是闰年二月
if(month == 1 && ((year%4 == 0 && year %100 != 0)||year%400==0)){
daysOfMonth[month] = 29;
}
var days = daysOfMonth[month];
var count = 1;
var startFlag = false;
// 得到填充数据
for(var row = 2 ; row < 8 ; row ++){
(calender_rows[row]) = ["","","","","","",""];
for(var col = 0 ; col < 7 ; col++){
if( !startFlag && col == currendMonthTopDay ){
(calender_rows[row])[col] = count.toString();
startFlag = true;
count++;
}else if(startFlag && count <= days){
(calender_rows[row])[col] = count.toString();
count++;
}
}
}
}
// 得到填充第一行数据
function getFirstRowUi(time,mark){
var month = (time.getMonth() + 1);
month = month < 10 ? "0"+month : month;
var day = time.getDate();
day = day < 10 ? "0"+day : day;
var first_values = [
"<a onclick=\"backMonth();\">last< /a>",
"<input type=\"text\" id=\""+mark+"_calenderTime\" value=\""+time.getYear()+"-"+month+"-"+day+"\"/>",
"<a onclick=\"javascript:nextMonth();\">next</a>"
];
return first_values;
}
// 处理上面表格点击事件
function mainDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
// 得到table元素
var table = obj.parentNode.parentNode.parentNode;
// 得到input元素
var sceneName = table.rows[0].cells[1].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);
}
// 处理下面表格点击事件，具体步骤如上
function bakDateTime(obj){
var value = obj.innerText;
value = value.length >1 ? value: "0"+value;
var table = obj.parentNode.parentNode.parentNode;
var sceneName = table.rows[0].cells[0].childNodes[0].value;
var yearMonthDay = sceneName.split("-");
alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);;
}
</script>
</head>
<body>
</body>
</html>
此实例中，上面的calendar是当前月的，下面的calendar是下个月的。程序中实现了last，next的功能，并处理了日期点击事件。但还有很多小bug，愿大家勿喷，只是个框架而已。
代码以共享，希望大家学习愉快。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现会跳动的日历效果(完整实例)
- js编写当天简单日历效果【实现代码】
- js实现日历效果
- js基础练习---获取数组内容实现简单日历的效果
- js编写当天简单日历效果【实现代码】
- 原生js实现仿window10系统日历效果的实例
- js实现仿京东2级菜单效果(带延时功能)
- js+css简单实现网页换肤效果
- JS 实现简单的Table表格分页效果（假分页）
- 原生js实现吸顶效果
- 纯CSS(无JS)实现的二级弹出菜单效果代码
- js 实现全屏效果
- 原生js FileReader对象实现图片上传本地预览效果
- js实现轮播图效果(附源码)--原生js的应用
- 第54天：原生js实现轮播图效果
- js实现文字滚动效果
- js实现安卓toast效果（Framework7框架）
- JS实现物体带缓冲的间歇运动效果示例
- js 一行代码实现图片圆角（角度可调）+ 阴影效果实现