日历原理（转）
开始看了一下网上的日历代码，感觉太复杂难理解。于是自己研究了一下，基本原理是取得某个月的总天数与第一天是星期几，然后在42个格子内显示出来。也就是7列X6行，所以大部分程序都是用两个for循环出来。感觉有点麻烦，我是用一个for循环出来。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style 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 type="text/javascript">
/*
开始看了一下网上的日历代码，感觉太复杂难理解。于是自己研究了一下，基本原理是取得某个月的总天数与第一天是星期几，然后在42个格子内显示出来。也就是7列X6行，所以大部分程序都是用两个for循环出来。感觉有点麻烦，我是用一个for循环出来。
当然以上只是日历的基本结构，然后我们可以在这基础上添加一些农历阴历节目之类的，至于选择年月就更简单了。如果你了解了这些原理，那么你就可以向世人宣布自己也可以做萌萌的日历插件了！
*/
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>";
var week = 0;
for(var i=1;i<=42;i++){
week++;
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> </td>";
}
if(i%7==0&&i<42){
html+="</tr><tr>";
week = 0;
}
}
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>
然以上只是日历的基本结构，然后我们可以在这基础上添加一些农历阴历节目之类的，至于选择年月就更简单了。如果你了解了这些原理，那么你就可以向世人宣布自己也可以做萌萌的日历插件了！
浙公网安备 33010602011771号