Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 7479|回复: 0

X2任务时间精确到分

[复制链接]
发表于 2011-3-14 10:13:20 | 显示全部楼层 |阅读模式
*************************************************
** 本教程基于版本:Discuz! X 2.0                                         **
*************************************************
x2将任务的时间精确到了分
调用的文件/static/js/calendar.js
template/default/common/forum_calendar.css
下面是对calendar.js部分代码的分析:(详细请阅读:)

初始化变量:
  1. var controlid = null;
  2. var currdate = null;
  3. var startdate = null;
  4. var enddate  = null;
  5. var yy = null; //年
  6. var mm = null;  //月
  7. var hh = null;  // 时
  8. var ii = null; //分
  9. var currday = null;
  10. var addtime = false; //确认标志
  11. var today = new Date();
  12. var lastcheckedyear = false;
  13. var lastcheckedmonth = false;
复制代码
产生日历控制面板:
  1. function loadcalendar() { //创建日历的显示效果
  2.         s = '';
  3.         s += '<div id="calendar" style="display:none; position:absolute; z-index:100000;" onclick="doane(event)">';
  4.         s += '<div style="width: 210px;"><table cellspacing="0" cellpadding="0" width="100%" style="text-align: center;">';
  5.         s += '<tr align="center" id="calendar_week"><td><a href="###" onclick="refreshcalendar(yy, mm-1)" title="上一月">&laquo;</a></td><td colspan="5" style="text-align: center"><a href="###" onclick="showdiv(\'year\');doane(event)" class="dropmenu" title="点击选择年份" id="year"></a>&nbsp; - &nbsp;<a id="month" class="dropmenu" title="点击选择月份" href="###" onclick="showdiv(\'month\');doane(event)"></a></td><td><A href="###" onclick="refreshcalendar(yy, mm+1)" title="下一月">&raquo;</A></td></tr>'; //点击时,改变月份
  6.         s += '<tr id="calendar_header"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'; //星期导航,从星期日至星期六
  7.         for(var i = 0; i < 6; i++) {//生产显示日期的框架
  8.                 s += '<tr>';
  9.                 for(var j = 1; j <= 7; j++) //对应的列增加7
  10.                         s += "<td id=d" + (i * 7 + j) + " height="19">0</td>";
  11.                 s += "</tr>";
  12.         }
  13.         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
  14.         s += '</table></div></div>';
  15.         s += '<div id="calendar_year" onclick="doane(event)" style="display: none;z-index:100001;"><div class="col">';
  16.         for(var k = 2020; k >= 1931; k--) { //显示1931--2020年
  17.                 s += k != 2020 && k % 10 == 0 ? '</div><div class="col">' : '';//按列显示,每列显示10个
  18.                 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 />';
  19.         }
  20.         s += '</div></div>';
  21.         s += '<div id="calendar_month" onclick="doane(event)" style="display: none;z-index:100001;">';
  22.         for(var k = 1; k <= 12; k++) { //显示月份 1--12
  23.                 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 ? '&nbsp;' : '') + ' 月</span></a><br />';
  24.         }
  25.         s += '</div>';
  26.         if(BROWSER.ie && BROWSER.ie < 7) {
  27.                 s += '<iframe id="calendariframe" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
  28.                 s += '<iframe id="calendariframe_year" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
  29.                 s += '<iframe id="calendariframe_month" frameborder="0" style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"></iframe>';
  30.         }

  31.         var div = document.createElement('div');
  32.         div.innerHTML = s;
  33.         $('append_parent').appendChild(div);
  34.         document.onclick = function(event) { //点击其他地方关闭日历
  35.                 closecalendar(event);
  36.         };
  37.         $('calendar').onclick = function(event) {
  38.                 doane(event);
  39.                 $('calendar_year').style.display = 'none';
  40.                 $('calendar_month').style.display = 'none';
  41.                 if(BROWSER.ie && BROWSER.ie < 7) {
  42.                         $('calendariframe_year').style.display = 'none';
  43.                         $('calendariframe_month').style.display = 'none';
  44.                 }
  45.         };
  46. }
复制代码
通过控制css样式来隐藏日历,函数为
  1. function closecalendar(event)
复制代码
对时间进行解析:
  1. function parsedate(s) {
  2.         /(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec(s); //通过exec方法对 s 进行查找,并返回数组。下面的$1,$2是子模式分别与匹配模式中的()相对应
  3.         var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 < 2101) ? parseFloat(RegExp.$1) : today.getFullYear();
  4.         var m2 = (RegExp.$2 && (RegExp.$2 > 0 && RegExp.$2 < 13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1;
  5.         var m3 = (RegExp.$3 && (RegExp.$3 > 0 && RegExp.$3 < 32)) ? parseFloat(RegExp.$3) : today.getDate();
  6.         var m4 = (RegExp.$4 && (RegExp.$4 > -1 && RegExp.$4 < 24)) ? parseFloat(RegExp.$4) : 0;
  7.         var m5 = (RegExp.$5 && (RegExp.$5 > -1 && RegExp.$5 < 60)) ? parseFloat(RegExp.$5) : 0;
  8.         /(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec("0000-00-00 00\:00");
  9.         return new Date(m1, m2 - 1, m3, m4, m5); //Date对像中的月是0-11,即m2-1
  10. }
复制代码
通过addtime来判断,并设置时间:
  1. function settime(d)
复制代码
对addtime 和 controlid进行判断,确认且没有在日历控制面板选择,即默认时间
  1. function confirmcalendar()
复制代码
显示日历:
  1. function showcalendar(event, controlid1, addtime1, startdate1, enddate1)
复制代码


重新加载日历控制面板的时间(通过上月、下月、年的改变)
  1. function refreshcalendar(y, m) {//重新加载时间
复制代码


对时间格式进行调整(月份、小时、分钟)当小于10则在左边有0填充
  1. function zerofill(s)
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

腾讯云自营「网站建设」全新上线!仅需1元,即可快速体验企业官网、电商网站的海量精美模版

小黑屋|Discuz! 官方站 ( 粤B2-20090059-165 )star

GMT+8, 2021-3-8 03:04 , Processed in 0.069213 second(s), 15 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表