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

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

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

以下为详细代码

<!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日历及说明

相关阅读: 留言板留言板V7.0; 各个苹果手表型号版本对比以及查看苹果手机Apple Watch型号; windows颜色选择框; 网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法; 设为首页代码; 支持火狐,IE6.ie7.ie8.ie9的加入收藏/设为首页代码; 深山旅行社网站管理系统 v1.6; 文本框输入限制

共有0条关于《黑色的非常酷的简单JavaScript日历及说明》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

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

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

更多>>最新添加文章: 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗; aliyun阿里云续费域名优惠口令(注册、续费都可以使用); windows7环境下安装配置jdk; python对微信操作要用到这两个库wxpy与itchat; ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明; DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法

更多>>随机抽取信息: IE6不支持png24的解决办法(png24做为css的背景); 12个定律原则; asp利用sina提供的ip库端口来获得当前IP所有的地区，所在国，所在省，所在市，在线解析json; 深山行者v1.0 PSD 源文件下载; 长春海外旅行社; 旅行社巴黎游主题模板效果

更多标签热门标签

收藏夹滑轮个人标语广告 body 下拉关于我们旅游压缩收藏中英 position 右击失效 css 透明规则搜索半透明保留网站省市显示器 form 容器奋斗论坛管理注册事务强度 asp.net innerHTML 破解 list 选项 photoshop style shift DIV+CSS做的透明菜单兼容IE、FF等工作室 skype 相册默认高度判断参数游览器焦点源文件网页滚动条