js生成动态日历

时间：2014-07-30 03:15:23 阅读：494 评论：0 收藏：0 [点我收藏+]

标签：style blog http color java io 数据 for

效果图：

bubuko.com,布布扣

看代码：

Html代码

<html>
<head>
<title>动态日历</title>
<style type="text/css">
table{border:1px solid white;}
thead tr{}
thead tr td{text-align:center;}
#calendar tr td{color: #000000;text-decoration: none;text-align:center;}
</style>
</head>
<body>
年份：<select id="selYear" name="year" onchange="changeCalendar()"></select>
月份：<select id="selMonth" name="month" onchange="changeCalendar()"></select>
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody id="calendar"></tbody>
</table>
</body>
<script type="text/javascript">
(function(){
var selYear = document.getElementById("selYear");
var selMonth = document.getElementById("selMonth");
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
//生成当前年往前推10往后推5的数据
for(var i = year - 10,len = year + 5; i < len; i++){
var opt = new Option(i + "年", i);
if(i == year) opt.selected = true;
selYear.options.add(opt);
}
//生成月份数据
for(var j = 1; j <= 12; j++){
var m = j < 10 ? "0" + j : j;
var opt = new Option(m + "月", m);
if(j == month) opt.selected = true;
selMonth.options.add(opt);
}
//显示当前月日历
showCalendar(year, month);
})();
//得到每月的天数
function getDaysOfMonth(year, month){
if(year && month){
if(month == 2){
//2月闰年判断
if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
return 29;
}
return 28;
}
var bigMonth = [1,3,5,7,8,10,12];
var littleMonth = [4,6,9,11];
for(var m in bigMonth){
if(bigMonth[m] == month)
return 31;
}
for(var m in littleMonth) {
if(littleMonth[m] == month)
return 30;
}
}
}
//根据年月生成日历
function showCalendar(year, month){
if(year && month){
var tbody = document.getElementById("calendar");
//生成前删除之前的行
for(var i = 0,len =tbody.rows.length;i< len;i++){
tbody.deleteRow();
}
var date = new Date(year, month - 1, 1);//month月的第一天
var day = date.getDay();//星期
var days = getDaysOfMonth(year, month);//month月的总天数
var temp = Math.floor((days + day) / 7);
var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数
var d = 1;
for(var i = 1; i <= rows; i++){//循环行
var tr = document.createElement("tr");
for(var j = 1; j <= 7; j++){//循环列
var td = document.createElement("td");
//超过最大天数赋空
if(d > days){
td.innerHTML = "";
tr.appendChild(td);
continue;
}
if(i == 1){
//第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一
if(j >= day + 1){
var html = "<input type=‘checkbox‘ name=‘chkDay‘>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}else{
td.innerHTML = "";
}
} else {
var html = "<input type=‘checkbox‘ name=‘chkDay‘>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
}
function changeCalendar(){
var y = document.getElementById("selYear").value;
var m = document.getElementById("selMonth").value;
showCalendar(y, m);
}
</script>
</html>

js生成动态日历,布布扣,bubuko.com

js生成动态日历

标签：style blog http color java io 数据 for

原文地址：http://www.cnblogs.com/tancp/p/3876830.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行