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

随机推荐

【转】Android 4.3源码下载及问题解决
[html] view plaincopy 1 2 3 4 5 6 7 8 9 10 11 jianguoliao@jianguoliao-Lenovo-IdeaPad-Y470:~$ cat /et ...
SystemTrayDemo
遗留问题:win7 java.awt.TrayIcon的displayMessage方法没有生效,通知消息不能正常弹出. 许多桌面环境都有一个区域用于放置在后台运行的程序的图标,这些程序偶尔会将某些 ...
分散式-ubuntu12.04安装hadoop1.2.1
在hadoop1.2.1被预装在一份报告中安装说明java.我装了很多的版本号java以及许多的版本号hadoop,然后发现oracle-java7与hadoop1.2.1能够匹配. 一,安装详细过程 ...
Hibernate在关于一对多，多对一双向关联映射
[Hibernate]之关于一对多,多对一双向关联映射因为一对多.和多对一的双向关联映射基本上一样,所以这里就一起写下来! Annotations配置 @Entity @Table(name=&qu ...
如何使用 iOS 7 的 AVSpeechSynthesizer 国家有声读物(4)
控制:我们一定要学会控制尤达大师(电影<星球大战>)有话:的关键在于控制.这本故事书是一个字一个字读出来,我愿意为它添加两个button,音调和语速,以便我们能够调整语音合成实时的时候. ...
吐槽一下Activiti用户手册和一本书
业余没事的时候,读点Java轮廓,无意中发现Activiti.我们打算跑了几个例子来看看它是如何. 我们一直从事低层次.我们在上面的照顾偶尔有精确地的程度不是什么. 这个过程是如此悲惨开始.第一Act ...
python中and和or的使用方法
今天看了一个源代码,甚是对python不解,于是查了下资料,只是纠正下网上的老兄的解释 python 中的and从右到左计算表达式.若全部值均为真,则返回最后一个值.若存在假,返回第一个假值. or是 ...
S3C2416裸机开发系列19_Fatfs播放录像wav音频文件
S3C2416裸机开发系列19 Fatfs播放录像wav音频文件国际象棋男孩 1048272975 多媒体资源,一般都是以文件的形式存储在固化存储器中.Fatfs所支持的fat32为windo ...
JAVA必备——Struts
在我们的开发中,有一个经典的框架,就是SSH,他们各自是:Struts,Spring,Hibernate,我们队他们神交已久,在曾经的博客中我介绍了Hibernate,今天我们也逐步揭开Struts的 ...
利用System.Net.Mail 的SmtpClient发送邮件
原文:利用System.Net.Mail 的SmtpClient发送邮件几个月前总结过关于Jmail发送邮件,当时用Jmail发送邮件发送速度有点慢(可能对Jmail了解不是很多).现在改为用微软提 ...

JavaScript实现简单日历

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

随机推荐

热门专题