还是以我这个年假日历的JS为例:
比如,我先不按先后顺序地创建几个日期条,然后随意点每个日期条的选项,或者在“自定义”输入框中输入数字,让每个日期条中的数值都不同,然后我再点日历右上角的排序图标,按日期先后顺序排序。
那么,在Firefox中,排序后的日期条都保留了刚才更改的值,而在IE6中则不是这样,值都恢复成了在创建元素节点时的默认值。
请问怎么才能让IE6也像Firefox那样?先谢谢了!
最新代码如下:
<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;
overflow: hidden;
}
#yearbar {
float: left;
width: auto;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #369;
}
#monthbar {
float: right;
font-size: 14px;
width: auto;
height: 26px;
padding: 0;
background-color: #369;
}
.month {
float: left;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0 8px;
color: #fff;
cursor: pointer;
background-color: #369;
}
.focusmonth {
float: left;
height: 26px;
line-height: 26px;
overflow: hidden;
padding: 0 8px;
border-top:2px solid #369;
color: #369;
cursor: pointer;
background-color: #ffc;
}
#daysbar {
width: 600px;
height: 30px;
background-color: #ffc;
border-bottom: 1px solid #369;
overflow: hidden;
}
#days {
float: left;
font-size: 12px;
width: auto;
height: 30px;
line-height: 30px;
padding: 0;
}
#sort {
float: right;
font-size: 12px;
width: auto;
cursor: pointer;
padding-right: 10px;
padding-top: 6px;
}
.weekenday {
color: #ccc;
padding: 0 3px;
}
.workday {
color: #369;
cursor: pointer;
padding: 0 4px;
}
#sheet {
width: 600px;
padding: 0;
overflow: hidden;
background-color: #369;
}
.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: 300px;
}
.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;
}
#stati {
width: 600px;
height: 30px;
line-height:30px;
padding: 0;
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('days').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('days').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 (m == spans[i].title) {
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;
}
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>全天 <input type="radio" name="range' + y + m + d + '" value="0" onclick="activeDIYHours(this)">自定义 <input class="hourdiy" type="text" size="2" maxlength="2" value="1" onkeyup="countHours()" onchange="countHours()" disabled></li>';
html += '<li class="hours">8</li>';
html += '<li class="unit">小时</li>';
html += '<li class="cancel"><img src="cancel.gif" border="0" width="17" height="17" title="移除" onclick="cancel(this)" style="cursor:pointer"></li>';
ul.innerHTML = html;
recordDay(y, m, d, ul);
sheet.appendChild(ul);
countHours();
countDateRange();
countDays();
}
//判断单日唯一
function uniqueDay(y, m, d) {
var date = '' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d);
for (var i in dayslist) {
if (date == dayslist[i].date) {
return false;
}
}
return true;
}
//记录单日
function recordDay(y, m, d, ul) {
dayslist.push({date: '' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d), elem: ul});
}
//设定小时数
function setHours(range) {
var hour = range.value;
var diy = range.parentNode.lastChild;
diy.disabled = true;
range.parentNode.nextSibling.innerHTML = hour;
countHours();
countDateRange();
countDays();
}
//激活自定义小时输入框
function activeDIYHours(range) {
var diy = range.parentNode.lastChild;
diy.disabled = false;
setTimeout(function(){diy.select();}, 100);
range.parentNode.nextSibling.innerHTML = '-';
countHours();
}
//取消单日
function cancel(input) {
var sheet = document.getElementById('sheet');
var ul = input.parentNode.parentNode;
var day = ul.firstChild.title;
sheet.removeChild(ul);
for (var i in dayslist) {
if (day == dayslist[i].date) {
dayslist.splice(i, 1);
break;
}
}
countHours();
countDateRange();
countDays();
}
//计算小时数
function countHours() {
var hn = document.getElementById('hournum');
var lis = document.getElementById('sheet').getElementsByTagName('input');
var hc = 0;
for (var i = 0; i < lis.length; i++) {
if ('radio' == lis[i].type && lis[i].checked) {
if ('0' == lis[i].value) {
var diyhour = lis[i].parentNode.lastChild.value;
if (!/^\d{1,2}$/.test(diyhour) || (diyhour < 1)) {
var d = lis[i].parentNode.parentNode.firstChild.innerHTML;
alert(d + '的自定义小时数应为大于零的整数。');
hc += 0;
lis[i].parentNode.lastChild.select();
} else {
hc += parseInt(lis[i].parentNode.lastChild.value);
}
} else {
hc += parseInt(lis[i].value);
}
}
}
hn.innerHTML = hc;
}
//计算日期范围
function countDateRange() {
var ds = document.getElementById('datestart');
var de = document.getElementById('dateend');
var dl = dayslist.slice(0, dayslist.length);
dl.sort(datesort);
var dsv = dl.length > 0 ? dl[0].date.replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
var dev = dl.length > 0 ? dl[dl.length-1].date.replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
ds.innerHTML = dsv;
de.innerHTML = dev;
}
//计算天数
function countDays() {
var dn = document.getElementById('daynum');
dn.innerHTML = dayslist.length;
}
//排序日期
function sortDate() {
if (dayslist.length > 0) {
var sheet = document.getElementById('sheet');
dayslist.sort(datesort);
for (var i in dayslist) {
sheet.appendChild(dayslist[i].elem);
}
}
}
//自定义排序函数
function datesort(a, b) {
return a.date - b.date;
}
</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>
<div id="daysbar">
<div id="days"></div>
<div id="sort"><img src="sort.gif" width="17" height="17" border="0" title="日期排序" onclick="sortDate()"></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.*