欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現日期聯動效果實例

 更新時間:2016年07月26日 15:48:44   作者:軒脈刃  
這篇文章主要介紹了jQuery實現日期聯動效果的方法,結合實例形式分析了jQuery針對日期及頁面元素動態(tài)操作的相關技巧,需要的朋友可以參考下

本文實例講述了jQuery實現日期聯動效果的方法。分享給大家供大家參考,具體如下:

實現目標:

兩個日期,有下拉框:

<head>
//導入jquery地址
<script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear發(fā)生變化
function changeYear(str,isstart)
{
  var pre = "start";
  if(isstart == false)
  {
    pre = "end";
  }
  var startMonth = $(pre + "Month").value;
  if(startMonth == "")
  {
    var e = $(pre + "Month");
    optionClear(e);
    return;
  }
  var n = MonHead[startMonth - 1];
  if(startMonth == 2 && IsPinYear($(pre + "Year").value))
  {
    n++;
  }
  writeDay(n,pre);
}
function changeMonth(str,isstart)
{
  var pre = "start";
  if(isstart == false)
  {
    pre = "end";
  }
  var year = $(pre + "Year").value;
  if(year == "")
  {
    var e = $(pre + "Day");
    optionClear(e);
    return;
  }
  var n = MonHead[str - 1];
  if(str == 2 && IsPinYear($(pre + "Year")))
  {
    n++;
  }
  writeDay(n,pre);
}
function dateStart()
{
  var defaultStartY = "2011";
  var defaultStartM = "1";
  var defaultStartD = "14";
  var defaultEndY = "2011";
  var defaultEndM = "2";
  var defaultEndD = "23";
  MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];
  var prestr = new Array("start","end");
  for(var j=0; j<2; j++)
  {
    var pre = prestr[j];
    //start 年
    var y = new Date().getFullYear();
    if(pre == "start")
    {
      //start初始選中前第10天
      var i_index = 0;
      for(var i=(y-10); i<=y; i++)
      {
        $(pre+"Year").options.add(new Option(""+i+"",i));
        if(i == defaultStartY)
        {
          $(pre+"Year").options[i_index].selected = true;
        }
        i_index++;
      }
    }
    else
    {
      var i_index =0;
      for(var i=(y-5); i<=y+5; i++)
      {
        $(pre+"Year").options.add(new Option(""+i+"",i));
        if(i == defaultEndY)
        {
          $(pre+"Year").options[i_index].selected = true;
        }
        i_index++;
      }
    }
    //start月
    defaultM = (pre == "start" ? defaultStartM : defaultEndM)
    for(var i = 1; i < 13; i++)
    {
      $(pre + "Month").options.add(new Option(""+i+"",i));
      if(i == defaultM)
      {
        $(pre + "Month").options[i-1].selected = true;
      }
    }
    //start日
    var n = MonHead[$(pre + "Month").value];
    if(new Date().getMonth == 1 && IsPinYear($(pre + "Year").value))
    {
      n++;
    }
    defaultD = (pre == "start" ? defaultStartD : defaultEndD)
    writeDay(n,pre);
    $(pre + "Day").options[defaultD-1].selected = true;
  }
}
function writeDay(n,pre)
{
  var e = $(pre + "Day");
  optionClear(e);
  for (var i=1; i<(n+1); i++)
  {
    e.options.add(new Option(""+i+"",i));
  }
}
function IsPinYear(year)
{
  return (0 == year%4 && (year%100 != 0 || year % 4 == 0));
}
function optionClear(e)
{
  for(var i=e.options.length; i>=0; i--)
  {
    e.remove(i);
  }
}
</script>
</head>
<body onload="dateStart()">
<p name="selectdate">
    從
    <select id="startYear" name="startYear" onchange="changeYear(this.value,true)">
    </select>
    年
    <select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">
    </select>
    月
    <select id="startDay" name="startDay">
    </select>
    日
    到
    <select id="endYear" name="endYear" onchange="changeYear(this.value,false)">
    </select>
    年
    <select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">
    </select>
    月
    <select id="endDay" name="endDay">
    </select>
    日
</p>
</body>

參考了一些代碼,終于能實現了~~

更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

  • 基于jquery實現鼠標左右拖動滑塊滑動附源碼下載

    基于jquery實現鼠標左右拖動滑塊滑動附源碼下載

    這篇文章主要介紹了基于jquery實現鼠標左右拖動滑塊滑動附源碼下載 的相關資料,需要的朋友可以參考下
    2015-12-12
  • jQuery中事件與動畫的總結分享

    jQuery中事件與動畫的總結分享

    下面小編就為大家?guī)硪黄猨Query中事件與動畫的總結分享。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • JQuery DIV 動態(tài)隱藏和顯示的方法

    JQuery DIV 動態(tài)隱藏和顯示的方法

    這篇文章主要介紹了JQuery DIV 動態(tài)隱藏和顯示的方法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • jQuery解析與處理服務器端返回xml格式數據的方法詳解

    jQuery解析與處理服務器端返回xml格式數據的方法詳解

    這篇文章主要介紹了jQuery解析與處理服務器端返回xml格式數據的方法,結合實例形式分析了jQuery基于ajax的get方法與后臺交互操作xml格式數據的相關技巧與注意事項,需要的朋友可以參考下
    2016-07-07
  • DIY jquery plugin - tabs標簽切換實現代碼

    DIY jquery plugin - tabs標簽切換實現代碼

    接觸jquery 2,3個月了,一直都未動手寫過插件。正好最近比較閑,就打算把一直看不順眼的項目中現有的tab改造一番(現有的tab未能做成一個控件,copy,past的代碼太多)。
    2010-12-12
  • jquery實現進度條狀態(tài)展示

    jquery實現進度條狀態(tài)展示

    這篇文章主要為大家詳細介紹了jquery實現進度條狀態(tài)展示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 使用jQuery給input標簽設置默認值

    使用jQuery給input標簽設置默認值

    這篇文章主要介紹使用jQuery給input標簽設置默認值的方法,實例講解,非常實用,需要的朋友可以參考下。
    2016-06-06
  • AJAX和jQuery動態(tài)加載數據的實現方法

    AJAX和jQuery動態(tài)加載數據的實現方法

    本文給大家介紹使用ajax和jquery動態(tài)加載數據的實現方法,使用jQuery可以簡化這個過程。下面通過實例代碼給大家介紹下,需要的的朋友參考下吧
    2016-12-12
  • jquery+css+html實現飛機大戰(zhàn)游戲

    jquery+css+html實現飛機大戰(zhàn)游戲

    這篇文章主要為大家詳細介紹了jquery+css+html實現飛機大戰(zhàn)游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • jQuery實現友好的輪播圖片特效

    jQuery實現友好的輪播圖片特效

    這篇文章主要介紹了jQuery實現友好的輪播圖片特效的方法及代碼分享,需要的朋友可以參考下
    2015-01-01

最新評論