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 追加元素代码献上: & ...

随机推荐

使用Bootstrap 他写道网站
新发现vdceye有些难看的网站,为了找到一个bootstrap工具,我一次又一次地写信给网站这个工具是很容易使用 http://vdceye.com/ 版权声明:本文博客原创文章,博客,未经同意, ...
开发随笔——NOT IN vs NOT EXISTS
原文:开发随笔--NOT IN vs NOT EXISTS 原文出处: http://blog.csdn.net/dba_huangzj/article/details/31374037 转载请引用 ...
windows 设置脚本IP
毫无疑问,在windows设置IP非常方便,因为有操作简单,直观的界面.通过图形用户界面设置IP在一般情况下是足够.但是,对于那些谁经常出差,由人产生的转换工作,这样的变化IP无疑耗时且不方便.假设一 ...
oracle 解锁scott账户
安装oracle数据库的时候忘了解锁账户,再加上一直配置不成功,链接不上,最后终于配置好了,发现没账户可用,oracle好难. oracle版本是 Oracle Database 11g Enterp ...
web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)
web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...
Android-用你自己的自定义图像资源（2）
Android-自己定义图像资源的使用 2014年4月29日上一篇博客.介绍前面几种图像资源的使用,本篇博客把剩下的所有介绍完: 普通图像资源 XML图像资源 Nine-patch图像资源 XM ...
如何设置eclipse在默认模式下打开文件
如何设置eclipse在默认模式下打开文件打开eclipse.选择例如以下:windows --> preferences --> General --> Editors --&g ...
IOS 数据库管理系统(SQLite)
嵌入式数据库 SQLite嵌入式数据库的优势 1.支持事件,你并不需要配置,无需安装,不需要管理员 2.支持部分脂肪SQL92 3.完整的数据库被存储在磁盘上的文件的顶部,相同的数据库文件可以在不同机 ...
FPGA图案--数字表示(代码+波形)
在数字逻辑系统,仅仅存在高低.所以用它只代表一个整数数字.并且有3代表性的种类.这是:原码表示(符号加绝对值值).反码表示(加-minus标志)而补码(符号加补).这三个在FPGA中都有着广泛的应用. ...
React的React Native
React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

JavaScript实现简单日历

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

随机推荐

热门专题