X2任务时间精确到分

evenzhou · 发表于 2011-3-14 10:13:20

*************************************************
** 本教程基于版本：Discuz! X 2.0 **
*************************************************
x2将任务的时间精确到了分
调用的文件/static/js/calendar.js
template/default/common/forum_calendar.css
下面是对calendar.js部分代码的分析：（详细请阅读：）

初始化变量：

var controlid = null;
var currdate = null;
var startdate = null;
var enddate = null;
var yy = null; //年
var mm = null; //月
var hh = null; // 时
var ii = null; //分
var currday = null;
var addtime = false; //确认标志
var today = new Date();
var lastcheckedyear = false;
var lastcheckedmonth = false;

复制代码

产生日历控制面板：

function loadcalendar() { //创建日历的显示效果
s = '';
s += '<div id="calendar" style="display:none; position:absolute; z-index:100000;" onclick="doane(event)">';
s += '<div style="width: 210px;"><table cellspacing="0" cellpadding="0" width="100%" style="text-align: center;">';
s += '<tr align="center" id="calendar_week"><td><a href="###" onclick="refreshcalendar(yy, mm-1)" title="上一月">«</a></td><td colspan="5" style="text-align: center"><a href="###" onclick="showdiv(\'year\');doane(event)" class="dropmenu" title="点击选择年份" id="year"></a>  -  <a id="month" class="dropmenu" title="点击选择月份" href="###" onclick="showdiv(\'month\');doane(event)"></a></td><td><A href="###" onclick="refreshcalendar(yy, mm+1)" title="下一月">»</A></td></tr>'; //点击时，改变月份
s += '<tr id="calendar_header"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'; //星期导航，从星期日至星期六
for(var i = 0; i < 6; i++) {//生产显示日期的框架
s += '<tr>';
for(var j = 1; j <= 7; j++) //对应的列增加7
s += "<td id=d" + (i * 7 + j) + " height="19">0</td>";
s += "</tr>";
}
s += '<tr id="hourminute" class="pns"><td colspan="4" align="left"><input type="text" size="1" value="" id="hour" class="px vm" onKeyUp=\'this.value=this.value > 23 ? 23 : zerofill(this.value);controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig, this.value+"$1")\'> 点 <input type="text" size="1" value="" id="minute" class="px vm" onKeyUp=\'this.value=this.value > 59 ? 59 : zerofill(this.value);controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig, "$1"+this.value)\'> 分</td><td align="right" colspan="3"><button class="pn" onclick="confirmcalendar();"><em>确定</em></button></td></tr>';//判断输入的时间是否正确，如果输入的‘时’>23 变为23,小于10则在前面填充0
s += '</table></div></div>';
s += '<div id="calendar_year" onclick="doane(event)" style="display: none;z-index:100001;"><div class="col">';
for(var k = 2020; k >= 1931; k--) { //显示1931--2020年
s += k != 2020 && k % 10 == 0 ? '</div><div class="col">' : '';//按列显示，每列显示10个
s += '<a href="###" onclick="refreshcalendar(' + k + ', mm);$(\'calendar_year\').style.display=\'none\'"><span' + (today.getFullYear() == k ? ' class="calendar_today"' : '') + ' id="calendar_year_' + k + '">' + k + '</span></a><br />';
}
s += '</div></div>';
s += '<div id="calendar_month" onclick="doane(event)" style="display: none;z-index:100001;">';
for(var k = 1; k <= 12; k++) { //显示月份 1--12
s += '<a href="###" onclick="refreshcalendar(yy, ' + (k - 1) + ');$(\'calendar_month\').style.display=\'none\'"><span' + (today.getMonth()+1 == k ? ' class="calendar_today"' : '') + ' id="calendar_month_' + k + '">' + k + ( k < 10 ? ' ' : '') + ' 月</span></a><br />';
}
s += '</div>';
if(BROWSER.ie && BROWSER.ie < 7) {
s += '<iframe id="calendariframe" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
s += '<iframe id="calendariframe_year" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
s += '<iframe id="calendariframe_month" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
}
var div = document.createElement('div');
div.innerHTML = s;
$('append_parent').appendChild(div);
document.onclick = function(event) { //点击其他地方关闭日历
closecalendar(event);
};
$('calendar').onclick = function(event) {
doane(event);
$('calendar_year').style.display = 'none';
$('calendar_month').style.display = 'none';
if(BROWSER.ie && BROWSER.ie < 7) {
$('calendariframe_year').style.display = 'none';
$('calendariframe_month').style.display = 'none';
}
};
}

复制代码

通过控制css样式来隐藏日历，函数为

function closecalendar(event)

复制代码

对时间进行解析：

function parsedate(s) {
/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec(s); //通过exec方法对 s 进行查找，并返回数组。下面的$1,$2是子模式分别与匹配模式中的（）相对应
var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 < 2101) ? parseFloat(RegExp.$1) : today.getFullYear();
var m2 = (RegExp.$2 && (RegExp.$2 > 0 && RegExp.$2 < 13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1;
var m3 = (RegExp.$3 && (RegExp.$3 > 0 && RegExp.$3 < 32)) ? parseFloat(RegExp.$3) : today.getDate();
var m4 = (RegExp.$4 && (RegExp.$4 > -1 && RegExp.$4 < 24)) ? parseFloat(RegExp.$4) : 0;
var m5 = (RegExp.$5 && (RegExp.$5 > -1 && RegExp.$5 < 60)) ? parseFloat(RegExp.$5) : 0;
/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec("0000-00-00 00\:00");
return new Date(m1, m2 - 1, m3, m4, m5); //Date对像中的月是0-11，即m2-1
}

复制代码

通过addtime来判断，并设置时间：

function settime(d)

复制代码

对addtime 和 controlid进行判断，确认且没有在日历控制面板选择，即默认时间

function confirmcalendar()

复制代码

显示日历：

function showcalendar(event, controlid1, addtime1, startdate1, enddate1)

复制代码

重新加载日历控制面板的时间（通过上月、下月、年的改变）

function refreshcalendar(y, m) {//重新加载时间

复制代码

对时间格式进行调整（月份、小时、分钟）当小于10则在左边有0填充

function zerofill(s)

复制代码

		自动登录	找回密码
密码			立即注册