“移除”或选择时间范围时，FF跟IE中表现的不一样，IE可以正常算出小时合计数，FF中没有变化，是不是需要hack啊？请大家帮忙看看，先谢过了！最好能把问题原因讲明～
以下是源文件：
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>njcalendar v1.0 - by Yang Yang</title>
<style type="text/css">
input.calendar {
border: 1px solid #369;
background-color: #fff;
color: #369;
font-size: 12px;
font-weight: bold;
}
#calendar {
width: 600px;
background-color: #369;
clear: both;
overflow: hidden;
}
#yearbar {
float: left;
width: auto;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0;
margin: 0;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #369;
}
#monthbar {
float: right;
font-size: 14px;
width: auto;
height: 26px;
padding: 0;
margin: 0;
background-color: #369;
}
.month {
float: left;
clear: right;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0 8px;
color: #fff;
cursor: pointer;
background-color: #369;
}
.focusmonth {
float: left;
clear: right;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0 8px;
border-top:2px solid #369;
color: #369;
cursor: pointer;
background-color: #ffc;
}
#daysbar {
float: left;
clear: both;
font-size: 12px;
width: 600px;
height: 30px;
line-height: 30px;
padding: 0;
margin: 0;
border-bottom: 1px solid #369;
background-color: #ffc;
}
.weekenday {
color: #ccc;
padding: 0 3px;
}
.workday {
color: #369;
cursor: pointer;
padding: 0 4px;
}
#sheet {
width: 600px;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
}
.daybar {
float: left;
clear: both;
width: 600px;
height: 36px;
padding: 0;
margin: 0;
border-bottom: 1px solid #b0bbbe;
list-style-type: none;
background-color: #eff5f8;
}
.daybar .date {
float: left;
padding-left: 10px;
font-size: 14px;
font-weight: bold;
color: #000;
line-height: 36px;
overflow: hidden;
width: 120px;
}
.daybar .range {
float: left;
padding-left: 10px;
padding-top: 6px;
font-size: 12px;
color: #369;
width: 220px;
}
.daybar .hours {
float: left;
padding-left: 10px;
line-height: 36px;
font-size: 12px;
color: #000;
width: auto;
}
.daybar .unit {
float: left;
padding-left: 10px;
line-height: 36px;
font-size: 12px;
color: #666;
width: auto;
}
.daybar li.cancel {
float: right;
padding-right: 10px;
padding-top: 6px;
color: #369;
width: auto;
}
input.cancel {
border: 1px solid #ccc;
background-color: #eee;
color: #666;
font-size: 12px;
}
#stati {
width: 600px;
height: 30px;
line-height:30px;
padding: 0;
margin: 0;
clear: both;
font-size: 12px;
color: #fff;
text-align: right;
background-color: #369;
overflow: hidden;
}
</style>
<script language="javascript">
//当前年月日
var focusy = (new Date()).getFullYear();
var focusm = (new Date()).getMonth()+1;
var focusd = (new Date()).getDate();
//上一年
function nextYear() {
var y = document.getElementById('year');
var n = parseInt(y.innerHTML) + 1;
y.innerHTML = n;
focusy = n;
renderCalendar(n);
}
//下一年
function prevYear() {
var y = document.getElementById('year');
var n = parseInt(y.innerHTML) - 1;
y.innerHTML = n;
focusy = n;
renderCalendar(n);
}
//判断是否周末
function isWeekenday(y, m, d) {
var date = new Date();
date.setFullYear(y, m-1, d);
var day = date.getDay();
return (day == 0 || day == 6) ? true : false;
}
//渲染日历
function renderCalendar(y) {
//月份
var m = getMonthDays(y);
var mths = m.length;
var html = '';
for (var i = 1; i < mths; i++) {
html += '<span title="' + i + '" class="' + (i == focusm ? 'focusmonth' : 'month') +
'" onclick="focusMonth(\'' + i + '\')">' + i + '月</span>';
}
document.getElementById('monthbar').innerHTML = html;
//天数
var html = '';
var days = m[focusm];
for (var i = 1; i <= days; i++) {
html += '<span class="' + (isWeekenday(y, focusm, i) ? 'weekenday' : 'workday') +
'" onclick="addDay(' + y + ',' + focusm + ',' + i + ')">' + i + '</span>';
}
document.getElementById('daysbar').innerHTML = html;
}
//渲染天数
function renderDays(y, m) {
var days = getMonthDays(y)[m];
var html = '';
for (var i = 1; i <= days; i++) {
html += '<span class="' + (isWeekenday(y, m, i) ? 'weekenday' : 'workday') +
'" onclick="addDay(' + y + ',' + m + ',' + i + ')">' + i + '</span>';
}
document.getElementById('daysbar').innerHTML = html;
}
//选择月份
function focusMonth(m) {
focusm = m;
var monthbar = document.getElementById('monthbar');
var spans = monthbar.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].title == m) {
spans[i].className = 'focusmonth';
} else {
spans[i].className = 'month';
}
}
renderDays(focusy, focusm);
}
//获取月份及天数
function getMonthDays(y) {
var m = new Array(13);
m[1]=m[3]=m[5]=m[7]=m[8]=m[10]=m[12]=31;
m[4]=m[6]=m[9]=m[11]=30;
m[2]=((y%4==0&&y%100!==0)||(y%100==0&&y%400==0))?29:28;
return m;
}
//单日维护表
var dayslist = [];
//添加单日项目条
function addDay(y, m, d) {
if (!uniqueDay(y, m, d)) {
return false;
}
recordDay(y, m, d);
var sheet = document.getElementById('sheet');
var ul = document.createElement('ul');
ul.className = 'daybar';
ul.onmouseover = function() { this.style.backgroundColor = '#e5ebee'; }
ul.onmouseout = function() { this.style.backgroundColor = '#eff5f8'; }
var html = '<li title="' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d) + '" class="date">' + y + '年' + m + '月' + d + '日' + '</li>';
html += '<li class="range"><input type="radio" name="range' + y + m + d + '" value="3" onclick="setHours(this)">上午 <input type="radio" name="range' + y + m + d + '" value="5" onclick="setHours(this)">下午 <input type="radio" name="range' + y + m + d + '" value="8" onclick="setHours(this)" checked>全天</li>';
html += '<li class="hours">8</li>';
html += '<li class="unit">小时</li>';
html += '<li class="cancel"><input class="cancel" type="button" value="移除" onclick="cancel(this)"></li>';
ul.innerHTML = html;
sheet.appendChild(ul);
countHours();
getDateRange();
getDays();
}
//判断单日唯一
function uniqueDay(y, m, d) {
var day = '' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d);
for (var i in dayslist) {
if (day == dayslist[i]) {
return false;
}
}
return true;
}
//记录单日
function recordDay(y, m, d) {
dayslist.push('' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d));
}
//设定小时数
function setHours(range) {
var hour = range.value;
range.parentNode.nextSibling.innerHTML = hour;
countHours();
getDateRange();
getDays();
}
//取消单日
function cancel(input) {
var sheet = document.getElementById('sheet');
var ul = input.parentNode.parentNode;
var day = ul.firstChild.title;
for (var i in dayslist) {
if (day == dayslist[i]) {
dayslist.splice(i, 1);
break;
}
}
sheet.removeChild(ul);
countHours();
getDateRange();
getDays();
}
//计算小时数
function countHours() {
var hn = document.getElementById('hournum');
var lis = document.getElementById('sheet').getElementsByTagName('li');
var hc = 0;
for (var i in lis) {
if (lis[i].className == 'hours') {
hc += parseInt(lis[i].innerHTML);
}
}
hn.innerHTML = hc;
}
//计算日期范围
function getDateRange() {
var ds = document.getElementById('datestart');
var de = document.getElementById('dateend');
var dl = dayslist.slice(0, dayslist.length);
dl.sort();
var dsv = dl[0] != null ? dl[0].replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
var dev = dl[dl.length-1] != null ? dl[dl.length-1].replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
ds.innerHTML = dsv;
de.innerHTML = dev;
}
//计算天数
function getDays() {
var dn = document.getElementById('daynum');
dn.innerHTML = dayslist.length;
}
</script>
</head>
<body>
<div id="calendar">
<div id="yearbar">
<input id="prevyear" class="calendar" type="button" value=" < " onclick="prevYear()">
<span id="year"></span>
<input id="nextyear" class="calendar" type="button" value=" > " onclick="nextYear()">
</div>
<div id="monthbar"></div>
<div id="daysbar"></div>
</div>
<div id="sheet"></div>
<div id="stati">从 <span id="datestart">-</span> 至 <span id="dateend">-</span> 共<span id="daynum">0</span>天，合计：<span id="hournum">0</span>小时 </div>
<script language="javascript">
window.onload = function() {
document.getElementById('year').innerHTML = focusy;
renderCalendar(focusy);
}
</script>
</body>
</html>
--
FROM 210.51.173.*