JavaScript实现简单日历

最新推荐文章于 2024-08-28 10:46:05 发布
最新推荐文章于 2024-08-28 10:46:05 发布
阅读量89 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/mfrbuaa/p/4354441.html
版权

页面代码：

<!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" οnfοcus="javascript:getCurrentDay();"/>
		<button οnclick="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" οnclick="javascript:drawCalendar('+(prevYear - 1)+','+prevMonth+');"'+
			   		' style="cursor:pointer;background-color:#FF6600;"><<<</td>';
			//向前翻月
			calendarTable += '<td colspan="2" οnclick="javascript:drawCalendar('+prevYear+','+prevMonth+');"'+
			   		' style="cursor:pointer;background-color:#FF6600;"><<</td>';
			//向后翻月
			calendarTable += '<td colspan="2" οnclick="javascript:drawCalendar('+nextYear+','+nextMonth+');"'+
			   		' style="cursor:pointer;background-color:#FF6600;">>></td>';
			 //向后翻年
			 calendarTable += '<td colspan="1" οnclick="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 οnclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'οnmοuseοver="javascript:setFocus(this);"'+'  οnmοuseοut="javascript:setFocusOut(this);"'+ '  style="cursor:pointer;">'+dateList[i][j]+'</td>';

 						if(i == line_top && j == line_bot)
 						{
 							dateCell = 
 									'<td οnclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'οnmοuseοver="javascript:setFocus(this);"'+'  οnmοuseοut="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"'+'οnclick="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;
 		}

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


转载于:https://www.cnblogs.com/mfrbuaa/p/4354441.html

相太阳
关注
javascript日历
05-26
NULL 博文链接：https://overbin.iteye.com/blog/513723
JavaScript日历
weixin_33747129的博客
01-08 259
&lt;style type="text/css"&gt; .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } ...
原生js手搓日历组件
最新发布
ZerZhang的博客
08-28 314
原生js手搓日历组件
JavaScript 日历
allway2的博客
05-29 246
HTML <!DOCTYPE html> <html> <head> <title>Vanilla JS Calendar</title> <meta charset="UTF-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="widt...
JavaScript实现简单日历效果
10-14
本文将介绍如何使用JavaScript实现一个简单但功能丰富的日历效果。 日历效果的实现一般涉及以下步骤：首先，需要使用HTML中的select标签来创建年份和月份的选择菜单。用户通过选择年份和月份来触发日历的更新。然后...
JavaScript实现简单的日历效果
10-21
JavaScript实现简单的日历效果的知识点包括： 1. HTML结构布局：该日历模板使用了标准的HTML结构，包括<!DOCTYPEhtml>声明、、和元素。在部分包含了页面的字符集、页面标题以及内嵌的CSS样式。页面的主要内容区域被...
JavaScript简单日历实现-小程序版
03-29
这个日历应该是网页中常见的小功能了，这个也是window下的时间显示器，这篇文章，就来实现下这个效果的小程序版本，哈哈，求个赞~~~这个可以当做小程序学习的一个很好的实例啦，底部有下载链接，有需要的可以下载...
日历javascript
02-23
简单易懂下载下来放到里面就能用的一款小小的日历
js实现日历的简单算法
10-20
主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript-日历
丁世杰的博客
07-08 110
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/.
JavaScript_日历
丁世杰的博客
11-25 230
<!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" xml:lang="en"> <hea...
javascript日历:calendar.js
asp.net常见问题分析，网站开发常见问题总结,ningxi_博客
04-30 2870
效果图：  calendar.js  原文件：/** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 * (2)选择日期和小时 * (3)选择日期和小时及分钟 *设置
一个JavaScript的日历
zgqtxwd的专栏
05-01 296
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值