许久没有写过小例子的代码了,今天有个朋友让我用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 οnclick=\"backMonth();\">last< /a>",
"<input type=\"text\" id=\""+mark+"_calenderTime\" value=\""+time.getYear()+"-"+month+"-"+day+"\"/>",
"<a οnclick=\"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,愿大家勿喷,只是个框架而已。
代码以共享,希望大家学习愉快。
转载于:https://blog.51cto.com/2950606/1122483