JavaScript实现简单日历

页面代码：

<!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>

	<meta http-equiv="content-type" content="text/html;charset=utf-8">

	<title>JavaScript Sample</title>

	<style type="text/css">

		div #dataTextContainer

		{

			border:1px #A5ACB2 solid;

			width: 100px;

			height: 19px;

			text-align: right;

			float:left;

		}

		div #dataTextContainer input

		{

			border-width: 0px;

			border-style: none;

			border-color: transparent;

			width: 68px;

			height: 14px;

			font-size: 12px;

			text-align: left;

		}

		div #dataTextContainer button

		{

			width: 22px;

			height: 19px;

			margin: 0px;

			padding:0px;

			text-align: center;

		}

		div #calendarContainer

		{

			width: 200px;

			height: 100px;

			z-index: 10000;

			font-size: 13px;

		}

	</style>

	<script type="text/javascript" src="inputDate.js"></script>

</head>

<body>

	<div id = "dataTextContainer">

		<input name="dataText" id="dateText" type="text" onfocus="javascript:getCurrentDay();"/>

		<button onclick="javascript:displayCalendar();">

			<img src="rili.jpg" width="15" height="12">

		</button>

	</div>

	<div id="calendarContainer"></div>

</body>

</html>

Javascript代码：

    	function getCurrentDay()

    	{

    		var newDate = new Date;

    		var odate = document.getElementById("dateText");

    		var date_year = newDate.getFullYear();

			var date_month = newDate.getMonth() + 1;

			var date_today = newDate.getDate();

    		odate.value = date_year+"-"+date_month+"-"+date_today;

    	}

    	function displayCalendar()

		{

			drawCalendar();

		}

		function closeCalendar()

		{

			var oCalendarContainer = document.getElementById("calendarContainer");

			oCalendarContainer.innerHTML = "";

		}

		function drawCalendar(sYear,sMonth)

		{

			var newDate;

			if(arguments[0] == null || arguments[1] == null)

			{

				newDate = new Date();

			}

			else

			{

				newDate = new Date(sYear,sMonth - 1);

			}

			var date_year = newDate.getFullYear();

			var date_month = newDate.getMonth() + 1;

			var date_today = newDate.getDate();

			var date_day = newDate.getDay();

			var nextMonth = date_month + 1;

			var nextYear = date_year;

			var prevMonth = date_month - 1;

			var prevYear = date_year;

			if(sMonth == 12)

			{

				nextMonth = 1;

				nextYear = date_year + 1;

			}

			if(sMonth == 1)

			{

				prevMonth = 12;

				prevYear = date_year - 1;

			}

			var calendarTable = "";

			calendarTable += '<table width="200" border="0" cellpadding="0" cellspacing="0" style="background-color:#0066FF;text-align:center;">';

			calendarTable += ' <tr style="background-color:#339999;">';

			//向前翻年

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+(prevYear - 1)+','+prevMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;"><<<</td>';

			//向前翻月

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+prevYear+','+prevMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;"><<</td>';

			//向后翻月

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+nextYear+','+nextMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;">>></td>';

			 //向后翻年

			 calendarTable += '<td colspan="1" onclick="javascript:drawCalendar('+(nextYear + 1)+','+nextMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;">>>></td>';

			calendarTable += ' </tr>';

			//星期表头

			calendarTable += '  <tr style="background-color:#6699FF;">';

			calendarTable += '      <td>日</td>';

			calendarTable += '      <td>一</td>';

			calendarTable += '      <td>二</td>';

			calendarTable += '      <td>三</td>';

			calendarTable += '      <td>四</td>';

			calendarTable += '      <td>五</td>';

			calendarTable += '      <td>六</td>';

			calendarTable += '  </tr>';

			//计算一个月内的天数,注意闰月

 			var dayNum_in_month = [31,28,31,30,31,30,31,31,30,31,30,31];

 			var isleapyear = date_year % 4;

 			if(isleapyear == 0)

 			{

 				dayNum_in_month[1] = 29;

 			}

 			var month_alldays = dayNum_in_month[date_month - 1];

 			//计算行数，line_top表示当前日期上面的行数，包含当前行；line_bot表示当前日期以下的行数，不包含当前行

 			var line_top;

 			var line_bot;

 			if((date_today - date_day + 1) % 7 != 0)

 			{

 				line_top = Math.floor((date_today - date_day + 1) / 7) + 1;

 			}

 			else

 			{

 				line_top = Math.floor((date_today - date_day + 1) / 7);

 			}

 			if((30 - date_today + date_day + 1) % 7 != 0)

 			{

 				line_bot = Math.floor((30 - date_today + date_day + 1) / 7) + 1;

 			}

 			else

 			{

 				line_bot = Math.floor((30 - date_today + date_day + 1) / 7);

 			}

 			//定义一个二维数组，预备一个6*7的数组，数组中每一个元素相应一个单元格(日期)

 			var dateList = new Array([""],[""],[""],[""],[""],[""],[""]);

 			var dateCell;

 			for(var i = 1; i < 7; i++)

 			{

 				//i是行数

 				calendarTable += '  <tr>';

 				for(var j = 0; j < 7; j++)

 				{

 					//j是列数

 					dateList[i][j] = date_today - 7 * (line_top - i + 1) + j - date_day;

 					//假设武器<=0，置空

 					if((date_today - 7 * (line_top - i + 1) + j - date_day) <= 0)

 					{

 						dateList[i][j] = " ";

 					}

 					//假设日期大于月总天数，则不显示

 					if((date_today - 7 * (line_top - i + 1) + j - date_day) > month_alldays)

 					{

 						dateList[i][j] = " ";

 					}

 					if(dateList[i][j] != " ")

 					{

 						//假设单元格不是空，那么能够设置其触发三个事件，共同拥有三个事件

 						//1、单击事件，将当前日期写入文本框

 						//2、鼠标指针移到单元格上，改变背景

 						//3、鼠标指针离开单元格，背景复原

 						dateCell =

 									'<td onclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'onmouseover="javascript:setFocus(this);"'+'  onmouseout="javascript:setFocusOut(this);"'+ '  style="cursor:pointer;">'+dateList[i][j]+'</td>';

 						if(i == line_top && j == line_bot)

 						{

 							dateCell =

 									'<td onclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'onmouseover="javascript:setFocus(this);"'+'  onmouseout="javascript:setFocusOut(this);"'+ '  style="cursor:pointer;background-color:#FF6600;">'+dateList[i][j]+'</td>';

 						}

 					}

 					else

 					{

 						dateCell = "<td> </td>";

 					}

 					calendarTable += dateCell;

 				}

 				calendarTable += '</tr>';

 			}

 			calendarTable += '<tr><td colspan="7"'+'onclick="javascript:closeCalendar();"'+'style="background-color#339999;cursor:pointer;color:red;font-weight:bold">'+'关闭('+date_year+"年"+date_month+"月"+')</td></tr>';

 			calendarTable += '</table>';

 			//将日期写入

 			var oCalendarContainer = document.getElementById("calendarContainer");

 			oCalendarContainer.innerHTML = calendarTable;

 		}

 		//当鼠标指针指到当前日期单元格

 		function setFocus(obj)

 		{

 			obj.style.backgroundColor = "#FF6600";

 		}

 		//当鼠标指针离开当前日期单元格

 		function setFocusOut(obj)

 		{

 			obj.style.backgroundColor = "";

 		}

 		//鼠标单击当前单元格

 		function setDateText(sYear,sMonth,sDate)

 		{

 			var oDateText = document.getElementById("dateText");

 			oDateText.value = sYear + "-" + sMonth + "-" + sDate;

 		}

效果：>>下一月 >>>下一年 <<上一月 <<<上一年

JavaScript实现简单日历的更多相关文章

js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
js超简单日历
用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...
JavaScript设置简单的自动时间
下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...
Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
javaScript(2)---简单使用
javaScript(2)---简单使用学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题一.创建一张HTML页面 <!DOCTYPE ...
Javascript学习-简单测试环境
Javascript学习-简单测试环境在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
JavaScript中简单排序总结
JavaScript中简单排序总结冒泡排序经典排序算法, 双重for循环在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...
JavaScript 实现简单的弹出框关闭框
JavaScript 实现简单的弹出框关闭框知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素代码献上: & ...

随机推荐

Mongodb 之insert瞬时完成，测试数据---飞天博客
这几天看mongdb官方网站,然后将执行数据.突然,我发现,该数据确实很强大,在这里说话数据.我用普通的pc机,amd双核 2.7GHz,4G内存,当然,当系统不只是在测试作为数据库server的.同 ...
数据库版本号是 661，打不开。此server支持 655 和更早的版本号。不支持降级路径
"数据库的版本号为 661,无法打开.此server支持 655 版及更低版本号. 不支持降级路径" 出现这种问题,通常是由于数据库版本号不同造成的. 我们能够用以下的语句查询数 ...
asm 盘头损失，破坏
BUG 14693394 – ORA-15196: INVALID ASM BLOCK HEADER [KFC.C:26076] [ENDIAN_KFBH] BUG 14758001 – ORA-15 ...
ZOJ3629 Treasure Hunt IV（找到规律，按公式）
Treasure Hunt IV Time Limit: 2 Seconds Memory Limit: 65536 KB Alice is exploring the wonderland ...
CentOS7 防火墙 firewall-cmd
最小化安装 CentOS7 后,很多端口默认是不打开的,需要通过 firewall-cmd 把这些端口打开. 检查防火墙状态 # firewall-cmd --state running 关闭防 ...
JAVA: httpclient 详细说明——第四章；
httpclient 具体解释--第一章. httpclient 具体解释--第二章: httpclient 具体解释--第三章: httpclient 具体解释--第四章: httpclient 具 ...
C++ - 派生类访问模板基类(templatized base class)命名
派生类访问模板基类(templatized base class)命名本文地址: http://blog.csdn.net/caroline_wendy/article/details/239936 ...
iOS 执行ScrollView在空白空间－解
iOS7 中间UIViewControllers配置automaticallyAdjustsScrollViewInsets.假设YES.scrollview它会根据status bar, navig ...
Task的异步模式
Task的异步模式返回该系列目录<基于Task的异步模式--全面介绍> 生成方法编译器生成在.NET Framework 4.5中,C#编译器实现了TAP.任何标有async关键字的 ...
Team Foundation Server 2015使用教程--默认团队成员添加

JavaScript实现简单日历

JavaScript实现简单日历的更多相关文章

随机推荐

热门专题