span的默认display属性是inline,这样导致了在firefox中无法对span设置宽度属性,需要调整span的display属性为inline-block就好了。这样ie中和firefox中就都能设置display属性了。
<html>
<head>
</head>
<body>
<script>
function createCalendar(year , month) {
//得到这一年的月份有多少天
var daysCount = getDayCount(year , month);
//得到1号和最大天数的日期对象
var dateStart = new Date(year , month - 1 , 1);
var dateEnd = new Date(year , month - 1 , daysCount);
//得到天数的开始和结束是星期几
var weekStart = dateStart.getDay();
var weekEnd = dateEnd.getDay();
//得到画出来的日历中空白的天数
var dayLeft = weekStart + 6 - weekEnd;
//得到总的天数
var monthDaysAll = daysCount + dayLeft;
//得到有几行
var rows = monthDaysAll / 7;
//画出标题
//大的div
var bigDiv = document.createElement('DIV');
bigDiv.className = 'calendar';
//添加title
var titleDiv = document.createElement('DIV');
titleDiv.className = 'title';
/*
text-align:center;
border:black 3px double;
width:350px;
*/
var textTitle = getMonthName(month);
titleDiv.appendChild(document.createTextNode(textTitle + ' , ' + year));
titleDiv.style.textAlign = 'center';
titleDiv.style.border = 'double 3px black';
titleDiv.style.width = '350px';
//添加到大的里面
bigDiv.appendChild(titleDiv);
//开始添加第一行
var count = 0 ;
var tmpDiv = null;
for(var i = 0 ; i < monthDaysAll ; i++) {
if(i % 7 == 0) {
tmpDiv = document.createElement('DIV');
tmpDiv.className = 'line';
bigDiv.appendChild(tmpDiv);
}
var span = document.createElement('SPAN');
/*
width : 50px;
border : solid double 3px;
margin:0px;
padding:0px;
text-align:center;
*/
if(i < weekStart) {
span.innerHTML = ' ';
} else if(i > (weekStart + daysCount - 1)) {
span.innerHTML = ' ';
} else {
span.innerHTML = (i + 1 - weekStart) + '';
}
span.style.display = 'inline-block';
span.style.width = '50px';
span.style.border = 'double 3px black';
span.style.margin = '0px';
span.style.padding = '0px';
span.style.textAlign = 'center';
tmpDiv.appendChild(span);
}
bigDiv.appendChild(document.createElement('BR'));
document.body.appendChild(bigDiv);
}
function getDayCount(year , month) {
var day = 0;
switch(month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
day = 31;
break;
case 4:
case 6:
case 9:
case 11:
day = 30;
break;
case 2:
if(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
day = 29;
break;
}else {
day = 28;
break;
}
}
return day;
}
/*
月份:January一月,February二月,March三月,April四月,May五月,June六月,July七月,August八月,September九月,October十月,Nevember十一月,December十二月.
*/
function getMonthName(month) {
switch(month) {
case 1:
return 'January';
case 2:
return 'February';
case 3:
return 'March';
case 4:
return 'April';
case 5:
return 'May';
case 6:
return 'June';
case 7:
return 'July';
case 8:
return 'August';
case 9:
return 'September';
case 10:
return 'October';
case 11:
return 'November';
case 12:
return 'December';
}
}
function drawYear(year) {
for(var i = 1 ; i <= 12 ; i++) {
createCalendar(year , i);
}
}
drawYear(2009);
</script>
</body>
</html>