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

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

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

以下为详细代码

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

相关阅读: 蒸汽消音器; 超级实用且不花哨的js代码大全( 4 ); HTML文档中meta标签的作用; 奸商修改器病毒篡改ThinkPad CPU信息; ASP与ACCESS数据库链接代码; 穿越火线风格-网吧留言本V4.3; 服务器iis配置.mp4视频格式播放(网页播放.mp4有声音但没有图像画面); 商务会议系统

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

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

返回顶部发表评论

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

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

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

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

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

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

更多>>随机抽取信息: 微信公众号回复音乐消息或用客服接口推送音乐消息; 微信公众平台; div+css标准化在新窗口打开链接; 特别推荐的asp数字加密(rsa); 总结一些DIV+CSS制作网页时容易犯的错误; CSS中的单位一览包括宽度尺寸单位颜色单位角度单位

更多标签热门标签

改变 text 简易广告复选框 sel 框 ctrl 锚点增高关闭框移虚拟 meta 数据库搜索还原十字省略注册注册表理想 asp.net 素材 dt onload radio flash 电脑分页左右全 input 源文件图片上传弹出验证旅行社边界重叠二级编辑 Application 长 em 时钟留言次数 rnd 设为首页文字垂直站长变化三级详解