`
orcl_zhang
  • 浏览: 244645 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面上一个日期计算的小东东

阅读更多
      客户的要求(查看图片),点击Range,可以选择一个日期范围,点击Calc可以选择日期的计算,计算完后,结果会同时显示在后面的input里,可以看下图片。因为考虑到很多地方要用到,所以写到help方法里了。感觉这个东西以后还会用,估计其他的同学也有可能会用到类似的功能,所以发出来,大家看看。计算日期用ruby代码来写很方便,用js代码来写,就很麻烦。
_time_period.html.erb
<% prefix << '_' unless prefix.blank? %>
<a onclick="$('<%= prefix %>unequal').style.display=($('<%= prefix %>unequal').style.display=='none' ? '' : 'none');$('<%= prefix %>widget').style.display='none';$('<%= prefix %>change_type').value = '';$('<%= prefix %>_num').value='';$('<%= prefix %>time_type').value='';$('#<%= prefix %>big').value = '';$('<%= prefix %>less').value='';" >Range</a>&nbsp;&nbsp;
<a onclick="$('<%= prefix %>widget').style.display=($('<%= prefix %>widget').style.display=='none' ? '' : 'none');$('<%= prefix %>unequal').style.display='none';$('<%= prefix %>big').value = '';$('<%= prefix %>less').value='';$('<%= prefix %>change_type').value = '';$('<%= prefix %>time_num').value='';$('<%= prefix %>time_type').value='';" >Calc</a><span> =
  <%= calendar_date_select_tag("#{prefix}equal",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago) %>
</span><span id='<%= prefix %>unequal' style='display: none;'>>
  <%= calendar_date_select_tag("#{prefix}big",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago) %>
  <
  <%= calendar_date_select_tag("#{prefix}less",nil,:style => "width: 80px;",:embedded => false,:year_range => 30.years.ago..-30.years.ago ) %>
</span>
<span id='<%= prefix %>widget' style='display:none;'>
  <script type="text/javascript">

    var equal = $('<%= prefix %>equal');
    var change_type = $('<%= prefix %>change_type');
    var time_num = $('<%= prefix %>time_num');
    var time_type = $('<%= prefix %>time_type');

    equal.observe('change', function(event){
      count_date();
    });
    change_type.observe('change', function(event){
      count_date();
      enter_equal();
    });
    time_num.observe('change', function(event){
      count_date();
      enter_equal();
    });
    time_type.observe('change', function(event){
      count_date();
      enter_equal();
    });

    function enter_equal(){
      if($F('<%= prefix %>equal')==''){alert('Please enter a date first!');}
    }

    function count_date(){
      if((!equal.value.blank()) && (!change_type.value.blank()) && (!time_num.value.blank()) && (!time_type.value.blank())){
        var time_num_number = Number(time_num.value);
        if (/^\d+$/.test(String(time_num.value)) && IsDate(equal.value)) {
          var r = equal.value.match(/^(\d{1,4})([-|\/])(\d{1,2})\2(\d{1,2})$/);
          var year = Number(r[1]);
          var month = Number(r[3]);
          var day = Number(r[4]);
          if(time_type.value == 0){
            $('<%= prefix %>result').value = equal.value;
          } else {
            if(change_type.value == 'plus' && time_type.value == 'days'){
              day = day + time_num_number;
            } else if (change_type.value == 'plus' && time_type.value == 'months') {
              month = month + time_num_number;
            } else if (change_type.value == 'plus' && time_type.value == 'years'){
              year = year + time_num_number;
            } else if (change_type.value == 'minus' && time_type.value == 'days'){
              day = day - time_num_number;
            } else if (change_type.value == 'minus' && time_type.value == 'months'){
              month = month - time_num_number;
            } else if (change_type.value == 'minus' && time_type.value == 'years'){
              year = year - time_num_number;
            }
            var result = correct_date(Number(year),Number(month),Number(day));
            $('<%= prefix %>result').value = result;
          }
        } else {
          $('<%= prefix %>result').value = '';
        }
      } else {
        $('<%= prefix %>result').value = '';
      }
    }
  </script>
  <select id='<%= prefix %>change_type' style='width: 80px;'>
    <option value=''>(+/-)</option>
    <option value='plus'>+</option>
    <option value='minus'>-</option>
  </select>
  <%= text_field_tag("#{prefix}time_num",nil,:style => 'width: 80px;' ) %>
  <select id='<%= prefix %>time_type' style='width: 80px;' >
    <option value=''>(d/m/y)</option>
    <option value='days'>Days</option>
    <option value='months'>Months</option>
    <option value='years'>Years</option>
  </select>
  <input type='text' readonly='readonly' id='<%= prefix %>result' value='' size=10 />
</span>


         <%= render :partial => 'time_period',:locals => { :prefix => ''}  %>

//匹配//yyyy-mm-dd || yyyy/mm/dd
function IsDate(str)
{
    var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
    if(r==null)return false; var d = new Date(r[1], r[3]-1, r[4]);
    return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}

//修正日期
//这里一直想不到很好的实现方法
function correct_date(year,month,day){
    var stand_day = day_max(year,month);
    if(day > stand_day){
        day = day - stand_day;
        month = month + 1;
    }
    if(month > 12){
        month = month - 12;
        year = year + 1;
    }
    if(day <= 0){
        var last_stand_day = day_max(year, month - 1);
        month = month - 1;
        day = day + last_stand_day;
    }
    if(month <= 0){
        month = month + 12;
        year = year - 1;
    }
    if(year <= 0){
        alert('invalid year!');
        return false;
    }
    var str_month = (month >= 10) ? String(month) : '0'+ String(month);
    var str_day = (day >= 10) ? String(day) : '0'+ String(day);
    var str = String(year)+'-'+str_month+'-'+str_day;
    if(IsDate(str)){
        return str;
    } else {
        return correct_date(year,month,day);
    }
}

//当月的最大日期
function day_max(year,month){
    if(month==4 || month==6 || month==9 || month==11){
        return 30;
    } else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
        return 31;
    } else {
        if(isleap(year)){
            return 29;
        } else {
            return 28;
        }
    }
}

//是否是闰年
function isleap(year){
    return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0))
}

      关于这段js代码,其实一直在后台有ruby实现的,相对而言,简单很多
          if params[:change_type] == "plus"
            date = params[:equal].to_date + params[:time_num].to_i
          elsif params[:change_type] == "minus"
            date = params[:equal].to_date - params[:time_num].to_i
          end
          if params[:change_type] == "plus"
            date = date.months_since(params[:time_num].to_i)
          elsif params[:change_type] == "minus"
            date = date.months_ago(params[:time_num].to_i)
          end

      但是考虑到,如果用js的话,可以避免多余的和后台通信,而且以后复用的话,不用在加很多代码。
关于这段js日期计算,冥冥之中感觉应该还有比较更好的写法,对js日期这块不熟悉,希望有经验的能提出意见。
就是他了,year,month,day在这里其实每次只有一个值在变,但是变化的范围不确定。
//修正日期
function correct_date(year,month,day){
    var stand_day = day_max(year,month);
    if(day > stand_day){
        day = day - stand_day;
        month = month + 1;
    }
    if(month > 12){
        month = month - 12;
        year = year + 1;
    }
    if(day <= 0){
        var last_stand_day = day_max(year, month - 1);
        month = month - 1;
        day = day + last_stand_day;
    }
    if(month <= 0){
        month = month + 12;
        year = year - 1;
    }
    if(year <= 0){
        alert('invalid year!');
        return false;
    }
    var str_month = (month >= 10) ? String(month) : '0'+ String(month);
    var str_day = (day >= 10) ? String(day) : '0'+ String(day);
    var str = String(year)+'-'+str_month+'-'+str_day;
    if(IsDate(str)){
        return str;
    } else {
        return correct_date(year,month,day);
    }
}
  • 大小: 5.6 KB
  • 大小: 3.4 KB
分享到:
评论
5 楼 orcl_zhang 2010-07-31  
发现je一个bug,我代码贴上去是
yearyear = year - time_num_number; 
但是我实际上代码是
year = year - time_num_number;
不信你贴下来看看。。
4 楼 orcl_zhang 2010-07-31  
鹤惊昆仑 写道
为啥不用模板哪?直接拼字符串可真难维护。

恩,没注意到 。。。我改下。。。
顺便把页面html里的几个相同的js代码也拿出来放一起。
因为有部分代码是旧有的,所以代码风格看上去有点窘。
3 楼 鹤惊昆仑 2010-07-31  
为啥不用模板哪?直接拼字符串可真难维护。
2 楼 orcl_zhang 2010-07-30  
Soloara 写道
LZ的方法语法不够优美

方法语法?你指的是help?请明示。谢谢
1 楼 Soloara 2010-07-30  
LZ的方法语法不够优美

相关推荐

    东财《计算机应用基础》20春单元作业三答案.docx

    这个文档题目是“东财《计算机应用基础》20春单元作业三答案”,描述中没有额外信息,主要标签为“作业”。根据提供的部分内容,我们可以总结出以下几个计算机应用基础的知识点: 1. **密码技术**:主要用于实现...

    Excel2013中打印区域的设置与调整.pdf

    - **页眉和页脚**:在“页眉/页脚”选项卡中,可以添加定制的文本、日期、页码等内容,以便于识别和组织打印出的页面。 - **工作表选项**:在“工作表”选项卡,可以设置是否打印网格线、工作表标签、行号和列标等。...

    东北师范大学计算机应用基础离线考试答案.pdf

    Excel是一款强大的电子表格软件,支持数据录入、格式设置、公式计算和图表制作。使用公式和数据透视表可以进行复杂的数据分析。通过超级链接功能,可以方便地访问网络上的文件。单元格中的内容可以是文本、日期、...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    安卓上用于加载的Webview视图窗口只是作为类浏览器而存在,在安卓上更是只能同时运行一个Webview。(2)跨域数据交互问题。不同的Webview之间无法共享数据。(3)页面自适应问题。页面难以兼容适应不同分辨率的设备...

    2021-2022计算机二级等级考试试题及答案No.14465.docx

    - **知识点详解**:Web 上的每个资源都有一个唯一的 URL (Uniform Resource Locator) 来标识该资源的位置及访问方式。URL 是一种标准的命名机制,用于描述资源的位置及如何对其进行访问。因此,正确答案为 A。 ### ...

    2021-2022计算机二级等级考试试题及答案No.15263.docx

    7. **turtle库**:turtle是Python中的一个图形绘制库,`home()`函数确实将画笔定位到原点并朝向东,`circle()`用于画圆,而`seth(x)`设置画笔方向,不是向前移动。 8. **二维数组**:在C语言中,数组`a[3][4]={{3,4...

    东师2014年春季期末作业考核《计算机应用基础》.doc

    另一题要求学生描述如何在Windows操作系统中复制D盘指定文件夹中的特定类型的文件到E盘另一个文件夹,这涉及文件管理的基本操作。此外,还讨论了PowerPoint中的超级链接功能,通常用于创建页面间的跳转,可在“动作...

    2021-2022计算机二级等级考试试题及答案No.17732.docx

    - **知识点**: Telnet 协议允许用户远程登录到另一台计算机上执行操作。 - **解释**: Telnet 是一种基于 TCP/IP 协议的应用程序,允许用户通过网络远程访问并控制其他计算机系统。 ### 15. 未知问题 - **知识点**: ...

    QTP 技术集锦 学习QTP的好东东

    QTP 中根据日期计算年龄的方法 - **算法**: 介绍一种简单有效的方法来计算日期对应的年龄。 - **示例**: 包含具体的 VBS 脚本代码实现。 #### 19. 测试报告的重要性 - **意义**: 讨论为什么创建详细的测试报告对于...

    2021-2022计算机二级等级考试试题及答案No.11914.docx

    这种布局管理器将容器分为五个区域:北、南、东、西和中心。 #### 8. 关系运算的时间复杂度 在关系运算中,**笛卡儿积**通常是耗时最长的操作之一。笛卡儿积涉及到两个集合的所有元素的配对,因此其时间复杂度较高...

    2021-2022计算机二级等级考试试题及答案No.18485.docx

    - **解释**: 页面页眉通常用于显示每一页的标题、日期、页码等基本信息,以便读者快速识别当前页的信息并了解上下文。 ### 3. Access中的事件 - **知识点**: Access支持多种类型的事件,如**键盘事件**、**鼠标...

    2021-2022计算机二级等级考试试题及答案No.15048.docx

    16. 四个选项中,DTOC(DATE()), DATE(), YEAR(DATE())都返回日期类型;ALLTRIM()返回字符串,ASC()返回字符编码,SPACE()返回空格字符串;EOF(), RECCOUNT(), DBC()分别返回布尔值、整数和数据库连接;STR(), DTOC()...

    2021-2022计算机二级等级考试试题及答案No.1596.docx

    **一个页面调用了多个验证控件,当有其中的一个验证未通过时,整个页面不会被通过验证**: 正确。 - D. **一个服务器控件可同时被多个验证控件验证**: 正确。 - **正确答案**: A. 在客户端和服务器端都能进行验证...

    2021-2022计算机二级等级考试试题及答案No.10081.docx

    1. **BorderLayout**:将容器划分为五个区域:东、南、西、北、中,适用于需要固定布局的应用场景。 ### 菜单文件的执行 1. **生成并执行菜单程序文件**:要运行菜单文件,首先需要将其编译为菜单程序文件(`.MPR` ...

    2021-2022计算机二级等级考试试题及答案No.12386.docx

    - **答案解析**:在Model1中,控制器通过`&lt;jsp:forward&gt;`标签分派请求给另一个JSP页面。 ### 13. 滚动条事件 - **Scroll事件**:当用户滚动滚动条时触发。 - **答案解析**:Scroll事件用于响应滚动操作。 ### 14....

    计算机二级考试试题&参考资料

    当屏幕上有多个应用程序时,此快捷键可以帮助用户快速返回桌面查看未被遮挡的信息。 - **Windows+L**:快速锁定电脑。这对于离开座位时保护个人信息安全非常重要。 - **F1**:帮助键。通常用于打开软件的帮助文档。 ...

    asp.net基于三层模式体育比赛网站+源代码+文档说明+数据库.zip

    用户在此页面可以根据日期查看最近一段时间的比赛赛程和对阵双方的球队。管理员在后台对赛程进行管理 (7)赛事数据统计管理 用户在这个页面可以查看每天各项数据排名前5名的球员以及他们所打出的数据。管理员在...

    2021-2022计算机二级等级考试试题及答案No.18792.docx

    - 如果插入的记录中包含了非空值,则`AUTO_INCREMENT`列将从该值之后开始计算下一个自增值。 #### 5. 实现递归调用中的存储分配 - **知识点**: 实现递归调用时的数据结构选择。 - **详细解释**: - 在实现递归调用...

    基于微信小程序的生活助手的设计与实现.doc

    4. 历史上的今天:查询特定日期的历史事件,需要有历史数据的数据库支持。 5. 星座运势:根据用户输入的星座提供运势预测,可能依赖于星座占星学的API或算法。 6. 图片备份:让用户能够上传和存储图片,后台需提供...

    java入门基础教程

    - **1.6 一个简单的Java小应用程序Java Applet** - Java Applet是一种可以在Web浏览器中运行的小应用程序。 - 需要了解HTML文件如何加载Java Applet以及Applet生命周期的相关概念。 - **1.7 什么是JSP** - JSP...

Global site tag (gtag.js) - Google Analytics