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

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

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

以下为详细代码

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

相关阅读: uni-app设置像页面html或者body的全局背景色; 超级实用且不花哨的js代码大全( 4 ); 长春海外旅行社; css翻页代码; uni-app与HTML的标签变化对比; 利用css设置div漂浮在底部或顶部; 绵阳市康辉国际旅行社有限责任公司; CSS设计中常见的精华问题收集

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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下载源让下载库飞起

更多>>随机抽取信息: 深山留言板css安装教程; ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明; 许愿墙页面设计完成，开始进行写相关的样式; javascript里confirm在外部文件中调用方法; 深山留言板5.0新版; 绝对可以用的IE6绿色版下载

更多标签热门标签

function 保护眼睛的电脑色 text 网站相册 css 网易框架许愿表单初级 vista 弹窗数据库文字样式高市倒计时对联闭合左右底部论坛用户体验禁止标注编辑进度伪类广告 Response 县文本 onload 万年历背景像素 hidden 不对齐变化 checkbox max 框移字母 dw 访问量改变关于我们企业 css 透明过滤