js生成日历原理

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2011-10-10   阅读次数: 1707   查看权限: 游客查看

最近工作在制作日历事件,所以特别研究了一下日历生成过程。

开始看了一下网上的日历代码,感觉太复杂难理解。于是自己研究了一下,基本原理是取得某个月的总天数与第一天是星期几,然后在42个格子内显示出来。也就是7列X6行,所以大部分程序都是用两个for循环出来。感觉有点麻烦,我是用一个for循环出来。

<!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>
<title>简单的日历</title>
<head>
<style rel="stylesheet" type="text/css">
.td_xq{
	text-align:center;
	font-size:12px;
	font-weight:bold;
}
.td_hao{
	font-size:12px;
	cursor:pointer;
	width:20px;
	height:20px;
	text-align:center;
}
</style>
</head>
<body>
<div id="scs_rl"></div>
<SCRIPT LANGUAGE="JavaScript">
function fDrawCal(y,m) {
var temp_d  = new Date(y,m-1,1);
var first_d = temp_d.getDay(); //返回本月1号是星期几
	temp_d  = new Date(y, m, 0);
var all_d   = temp_d.getDate();//返回本月共有多少天,同时避免复杂的判断润年不润年
var html,i_d;
html=y+"年"+m+"月"+d_d+"日";
html+="<table border='1' cellpadding='0' cellspacing='1' bgcolor='#ffffff'><tr>"
html+="<td class='td_xq'>日</td>";
html+="<td class='td_xq'>一</td>";
html+="<td class='td_xq'>二</td>";
html+="<td class='td_xq'>三</td>";
html+="<td class='td_xq'>四</td>";
html+="<td class='td_xq'>五</td>";
html+="<td class='td_xq'>六</td></tr>";
html+="<tr>";
for(var i=1;i<=42;i++){
	if(first_d<i&&i<=(all_d+first_d)){
		i_d=i-first_d;//显示出几号
		html+="<td class='td_hao' onclick='show(this)'";
		if (y==d_y&&m==d_m&&d_d==i_d){//日历中为当天
			html+=" style='color:red'>"+i_d+"</td>";
		}else{
			html+=">"+i_d+"</td>";
		}
	}else{
		html+="<td>&nbsp;</td>";
	}
	if(i%7==0&&i<42){
		html+="</tr><tr>";
	}
}
html+="</tr></table>";
document.getElementById("scs_rl").innerHTML=html;
}

//点击函数
function show(obj){
	var t=obj.innerHTML;
	//点击后获取时间,如果日历在月视图中不作为,如果在日视图对应跳到对应的日期,如果是在周视图视情况判断
	alert(t);
}

var d_Date = new Date();			//系统时间对象
var d_y = d_Date.getFullYear();		//完整的年份,千万不要使用getYear,firfox不支持
var d_m = d_Date.getMonth()+1;		//注意获取的月份比实现的小1
var d_d = d_Date.getDate();
fDrawCal(d_y,d_m);
</script>
<body>
</html>

当然以上只是日历的基本结构,然后我们可以在这基础上添加一些农历阴历节目之类的,至于选择年月就更简单了。如果你了解了这些原理,那么你就可以向世人宣布自己也可以做萌萌的日历插件了!

关键词: js日历,简单日历   编辑时间: 2011-10-10

  • 感到高兴

    2

    高兴
  • 感到支持

    1

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    2

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
71.43%(5)
28.57%(2)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐