黑色的非常酷的简单JavaScript日历及说明 -- [时间日期]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

黑色的非常酷的简单JavaScript日历及说明

深山行者个人网站 2010/7/4 16:53:06 深山行者字体:大中小浏览 11730

以下为详细代码

<!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>calendar2</title>
<style type="text/css">
#calendar{
	background:#000;
	color:#FFF;
	font-size:0.8em;
}
#tittle{
	font-size:1.4em;
	padding:4px 0.55em;
}
#days th {
	font-weight:bold;
	text-align:center;
	padding:4px 0.55em;
}
#calendar td{
	text-align:center;
	padding:4px 0.55em;
}
#today{
	color:#F00;
	font-weight:bold;
}
</style>
<script type="text/javascript">
var calendar = {
	dayTable:null,				//初始化TABLE
	year:null,					//初始化年
	month:null,					//初始化月份
	
	getFirstDay:function(year,month){					//获取每个月第一天再星期几
		var firstDay = new Date(year,month,1);
		return firstDay.getDay();						//getDay()方法来获取
	},
	getMonthLen:function(year,month){					//获取当月总共有多少天
		var nextMonth = new Date(year,month+1,1);		//获取下个月的第一天	
		nextMonth.setHours(nextMonth.getHours() - 3);	//由于获取的天是0时,所以减去3小时则可以得出该月的天数
		return nextMonth.getDate();						//返回当天日期
	},
	createCalendar:function(form,date){					//创建日历方法
		calendar.year = date.getFullYear();				//获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用
		calendar.month = date.getMonth();				//跟上面获取年份的目的一样
		form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月';		//插入年份和月份
		calendar.clearCalendar(form);					//清空TABLE
		var monthLen = calendar.getMonthLen(calendar.year,calendar.month);		//获取月份长度
		var firstDay = calendar.getFirstDay(calendar.year,calendar.month);		//获取月份首天为星期几
		for(var i = 1;i <= monthLen;i++){										//循环写入每天的值进入TABLE中
			calendar.dayTable[i+firstDay-1].innerHTML = i;						//i为循环值,加上第一天的星期值刚可以对应TABLE位置,但由于数组从0开始算,所以需要减去1
			if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){	//判断是否是当天
				calendar.dayTable[i+firstDay-1].id = 'today';
			}
		}
	},
	clearCalendar:function(form){						//清空TABLE方法
		this.dayTable = form.getElementsByTagName('td');
		for(var i = 0;i < this.dayTable.length;i++){
			this.dayTable[i].innerHTML = '&nbsp;';
			this.dayTable[i].id = '';
		}
	},
	init:function(form){								//主方法
		this.dayTable = form.getElementsByTagName('td');
		this.createCalendar(form,new Date());
		var preMon = form.getElementsByTagName('th')[0];
		var nextMon = form.getElementsByTagName('th')[2];
		preMon.onclick = function(){					//当点击左按钮时,减去一个月,并重绘TABLE
			calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
		}
		nextMon.onclick = function(){					//当点击右按钮时,加上一个月,并重绘TABLE
			calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
		}
	}
	
}
window.onload = function(){
	var calendars = document.getElementById('calendar');
	
	calendar.init(calendars);
}
</script>
</head>
<body>
<table id="calendar" cellspacing="0">
	<tr>
    	<th style="cursor:pointer;cursor:hand;"><<</th>
		<th id="tittle" colspan="5">&nbsp;</th>
        <th style="cursor:pointer;cursor:hand;">>></th>
	</tr>
	<tr id="days">
		<th>日</th>
		<th>一</th>
		<th>二</th>
		<th>三</th>
		<th>四</th>
		<th>五</th>
		<th>六</th>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

前一页:非常酷的javascript实现万年历功能

后一页:特别简洁的简单JavaScript日历及说明

相关阅读: javascript时间显示01; 商务会议系统; css　a标签与如何利用css中text-indent实现文章缩进; asp判断是否是手机访问; asp遍历站点所有文件夹的代码; 新疆旅游在线; 解析css属性的另类属性之媒体（Media）类型; asp利用XMLHTTP加载动态页面并且生成静态页面

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: 利用JavaScript获取现在时间日期与农历; 另外的一种可以计算的倒计时效果; 非常酷的javascript实现万年历功能; 黑色的非常酷的简单JavaScript日历及说明; 特别简洁的简单JavaScript日历及说明; 可以用于考试系统中试卷上交的javascript倒计时

更多>>最新添加文章: 2026 aliyun阿里域名云注册续费优惠口令; dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起

更多>>随机抽取信息: Vista中使用IIS 7.0三个常见问题; 纯asp根据当前日期计算出当前年份的属相; asp读取163的rss之xml数据; 19寸宽屏旅行社网站模板7; asp将中文汉字字符转为unicode编码(\u编码)与把unicode编码转为汉字; 深山行者留言系统V2.2 (简称留言板V2.2)

更多标签热门标签

省略 js 下划线关闭我想你 DIV CSS做的透明菜单兼容IE、FF等 CSS规范 css div radio 九宫格 select 三级固定选择框半透明定制十字调节 windows 浮动爱墙翻页展示计划限制查询留言板 DropShadow 斜线彩色硬件读取 flash 透明模式快捷防止表达式上下左右 ie5.5 绝对管用的iis安装包下载展开旅行社 lightbox 滑动 cpu 眼睛忧化项目 ResponseXML