JavaScript用select實現日期控制項_javascript技巧

來源:互聯網
上載者:User

代碼很簡單,這裡就不多廢話了,直接給大家源碼吧

<!doctype html><html><head><title>年月日</title></head><body onLoad="init()"><select id="year" onChange="swap_day()"></select>年<select id="month" onChange="swap_day()"></select>月<select id="day"></select>日</body><script>var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的數組var month_small = new Array("4","6","9","11"); //包含所有小月的數組 //頁面載入時調用的初始化select控制項的option的函數function init(){  var select_year = document.getElementById("year"); //擷取id為"year"的下拉式清單方塊  var select_month = document.getElementById("month"); //擷取id為"month"的下拉式清單方塊  var select_day = document.getElementById("day"); //擷取id為"day"的下拉式清單方塊    //將年份選項初始化,從1980到2000  for(var i = 1980; i <= 2000; i++)  {    select_year_option = new Option(i, i);    select_year.options.add(select_year_option);  }    //將月份選項初始化,從1到12  for(var i = 1; i <= 12; i++)  {    select_month_option = new Option(i, i);    select_month.options.add(select_month_option);  }    //調用swap_day函數初始化日期    swap_day();}//判斷數組array中是否包含元素obj的函數,包含則返回true,不包含則返回falsefunction array_contain(array, obj){  for (var i = 0; i < array.length; i++)  {    if (array[i] === obj)    {      return true;    }  }  return false;}//根據年份和月份調整日期的函數function swap_day(){  var select_year = document.getElementById("year"); //擷取id為"year"的下拉式清單方塊  var select_month = document.getElementById("month"); //擷取id為"month"的下拉式清單方塊  var select_day = document.getElementById("day"); //擷取id為"day"的下拉式清單方塊    select_day.options.length = 0; //在調整前先清空日期選項裡面的原有選項  var month = select_month.options[select_month.selectedIndex].value; //擷取被選中的月份month    //如果month被包含在month_big數組中,即被選中月份是大月,則將日期選項初始化為31天  if(array_contain(month_big, month))  {    for(var i = 1; i <= 31; i++)    {      select_day_option = new Option(i, i);      select_day.options.add(select_day_option);    }  }    //如果month被包含在month_small數組中,即被選中月份是小月,則將日期選項初始化為30天  else if(array_contain(month_small, month))  {    for(var i = 1; i <= 30; i++)    {      select_day_option = new Option(i, i);      select_day.options.add(select_day_option);    }  }    //如果month為2,即被選中的月份是2月,則調用initFeb()函數來初始化日期選項  else  {    initFeb();     }}//判斷年份year是否為閏年,是閏年則返回true,否則返回falsefunction isLeapYear(year){  var a = year % 4;  var b = year % 100;  var c = year % 400;  if( ( (a == 0) && (b != 0) ) || (c == 0) )  {    return true;  }  return false;}//根據年份是否閏年來初始化二月的日期選項function initFeb(){  var select_year = document.getElementById("year"); //擷取id為"year"的下拉式清單方塊  var select_day = document.getElementById("day"); //擷取id為"day"的下拉式清單方塊  var year = parseInt(select_year.options[select_year.selectedIndex].value); //擷取被選中的年份並轉換成Int    //如果是閏年,則將日期選項初始化為29天  if(isLeapYear(year))  {    for(var i = 1; i <= 29; i++)    {      select_day_option = new Option(i, i);      select_day.options.add(select_day_option);    }  }    //如果不是閏年,則將日期選項初始化為28天  else  {    for(var i = 1; i <= 28; i++)    {      select_day_option = new Option(i, i);      select_day.options.add(select_day_option);    }  }}</script></html>

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.