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

随机推荐

fzu 2150 Fire Game 【身手BFS】
称号:fzupid=2150"> 2150 Fire Game :给出一个m*n的图,'#'表示草坪,' . '表示空地,然后能够选择在随意的两个草坪格子点火.火每 1 s会向周围四个 ...
UVa 10491 - Cows and Cars
題目:有m+n個們,每個門後面有牛或者車:有n仅仅牛,m輛車,你選擇当中1個: 然後打開当中的k你沒有選中的門後是牛的,問你改變選時得到車的概率. 說明:數學題,概率.全概率公式就可以: 說明:第10 ...
OpenCV视频播放方法
OpenCV视频播放方法今天折腾了一下OpenCV的视频播放功能,希望能对项目又帮助- 代码还是非常easy的,仅仅是之前遇到点小麻烦,找不到cvCreateFileCapture函数的定义,花了一 ...
模拟Vue之数据驱动3
一.前言在"模拟Vue之数据驱动2"中,我们实现了个Observer构造函数,通过它可以达到监听已有数据data中的所有属性. 但,倘若我们想在某个对象中,新增某个属性呢? 如下 ...
UI设计规范
iphone\ipad.android UI设计规范对比 http://blog.163.com/leenell@yeah/blog/static/95840991201302210451710/ A ...
[HAOI2005]路由问题，第二短路
[问题描写叙述] X城有一个含有N个节点的通信网络,在通信中,我们往往关心信息从一个节点I传输到节点J的最短路径.遗憾的是.因为种种原因,线路中总有一些节点会出故障,因此在传输中要避开故障节点 ...
NSIS：强制结束软件进程
原文NSIS:强制结束软件进程有时候,我们选择卸载软件后发现安装目录中的主文件依然存在,不是我们卸载代码写的不对,而是卸载的时候软件根本就没有关闭! 在卸载前加上下面这个宏可以在一定程度上免除上述的 ...
对“demo!demo.Index+HookProc::Invoke”垃圾收集的类型已委托回调。这可能会导致应用程序崩溃、损坏和数据丢失。当传递委托给非托管代码，托管应用程序必须让这些委托保持活着
对"demo!demo.Index+HookProc::Invoke"垃圾收集的类型已委托回调.这可能会导致应用程序崩溃.损坏和数据丢失.当传递委托给非托管代码,托管应用程序必须承 ...
编写WCF服务时右击配置文件无“Edit WCF Configuration”（编辑 WCF 配置）远程的解决办法
原文:编写WCF服务时右击配置文件无“Edit WCF Configuration”远程的解决办法今天在看<WCF揭秘>书中看到作者提出可以在一个WCF Host应用程序的App.Con ...
基于Haar特征Adaboost人脸检测级联分类
基于Haar特征Adaboost人脸检测级联分类基于Haar特征Adaboost人脸检测级联分类,称haar分类器. 通过这个算法的名字,我们能够看到这个算法事实上包括了几个关键点:Haar特征.A ...

JavaScript实现简单日历

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

随机推荐

热门专题