`
hejiaqi789
  • 浏览: 29863 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

日期js简单下拉列表

百度JavaScriptXHTMLHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期动态联动演示</title>
<script type="text/javascript">
    var oYears,oMonths,oDays,isLeapYear;
    var iy,im,id;
   
    window.onload=function () {
        initDate();
    }
   
    function initDate() {
        isLeapYear=false;
        oYears=document.getElementById('years');  //获得year的select
        oMonths=document.getElementById('months'); //获得month的select
        oDays=document.getElementById('days');        //获得day的select
        initYears();                                //初始化年份
        //设定三个select的onChange事件
        oYears.onchange=chgYear;                   
        oMonths.onchange=chgMonth;
        oDays.onchange=chgDay;
    }

    function initYears() {
        oYears.length=1;
        var cYear=new Date().getYear();
        for (var i=cYear-20;i<=cYear;i++)                //从当前年份前20年开始循环，可以自己更改循环区间
        {
            var o=new Option(i.toString(),i.toString());
            oYears.add(o);
        }
    }

    function chgYear() {
        try
        {
            isLeapYear=false;
            var year=parseInt(this.options[this.selectedIndex].value);    //获得选择的年份
            //判断是否是闰年，不懂公式的自己百度
            if (year%4==0) isLeapYear=true;
            if (year%100==0 && year%400!=0) isLeapYear=false;
            if (year%100==0 && year%400==0) isLeapYear=true;
            initMonths();                        //为了体现联动的效果，这里没选择一次年份都初始化一次月份
        }
        catch(e){;}
    }
   
    function initMonths() {
        oMonths.length=1;
        for (var i=1;i<13;i++)                //月份是1～12月
        {
            var o=new Option(i.toString(),i.toString());
            oMonths.add(o);
        }
    }
   
    function chgMonth() {
        try
        {
            var month=this.options[this.selectedIndex].value;
            if (month!='')            
            {
                var days;
                if (month.replace(/(1|3|5|7|8|10|12)/ig,'')=='')     //判断是否为大月
                    days=31;
                else if (month.replace(/(4|6|9|11)/ig,'')=='')        //判断是否为小月
                    days=30;
                else if (month=='2' && isLeapYear)                 //判断当是2月时，是否为闰月
                    days=29;
                else
                    days=28;
                initDays(days);
            }
        }
        catch(e) {;}
    }
   
    function initDays(days) {
        oDays.length=1;
        for (var i=1;i<=parseInt(days);i++)                    //循环显示天数
        {
            var o=new Option(i.toString(),i.toString());
            oDays.add(o);
        }
    }
   
    function chgDay() {
        //改变日期时，调用该函数
        try
        {
            var year=oYears.options[oYears.selectedIndex].value;
            var month=oMonths.options[oMonths.selectedIndex].value;
            var day=this.options[this.selectedIndex].value;
            alert('您选择了'+year+'年'+month+'月'+day+'日');
        }
        catch(e) {;}
    }
</script>


</head>

<body>
<div>
<select id="years">
    <option value="">选择年份</option>
</select>
<select id="months">
    <option value="">选择月份</option>
</select>
<select id="days">
    <option value="">选择日子</option>
</select>
</div>
</body>
</html>

 

分享到：
| android学习之Intent传值——个人理解说明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个简易js日期下拉选择菜单

    "一个简易js日期下拉选择菜单" 提供了一个用JavaScript实现的简单解决方案，无需依赖任何外部库，如jQuery或Moment.js。这种自定义的日期选择器可以有效地减少页面加载时间，特别适用于对性能有要求的小型项目。 ...

    下拉列表自动跳转超链接网页

    一个简单的下拉列表（`&lt;select&gt;`）可以这样编写： ```html 请选择 选项1 选项2 &lt;!-- 添加更多选项 --&gt; ``` 这里的每个`&lt;option&gt;`元素代表下拉列表中的一个选项，`value`属性则存放对应超链接的URL。注意，...

    boostrap表格，日期，下拉列表插件的js和css文件

    接下来，下拉列表（Dropdown）是Bootstrap导航和表单中的重要元素。它们允许用户从一组预定义选项中进行选择，而无需创建多个按钮或输入字段。Bootstrap的下拉菜单可以通过简单的HTML和JavaScript实现，同时也支持...

    javascript下拉列表 显示时间

    本文将深入探讨如何使用JavaScript实现一个下拉列表，点击后能以“2011-12-2 星期五”这样的格式显示日期。 首先，我们需要在HTML中创建一个基础的下拉列表。下面是一个简单的示例： ```html ...

    利用jsp关联下拉列表日期

    本文将详细介绍如何使用JSP来实现一个简单的日期选择器，其中包含了三个关联的下拉列表：年份、月份和日期。当用户选择年份或月份时，日期下拉列表会自动更新以显示正确的日期范围。 #### 二、代码分析 首先，我们...

    ASP 简单实现日期下拉菜单

    以下是一个简单的ASP实现日期下拉菜单的例子： 首先，HTML部分包含三个`&lt;select&gt;`元素，分别用于年、月和日的选择。每个`&lt;select&gt;`都有一个唯一的ID，分别是`tYEAR`、`tMON`和`tDAY`。当用户在年或月的下拉菜单中...

    jQuery下拉列表框日期选择代码.zip

    总的来说，这个jQuery下拉列表框日期选择代码提供了一种简单易用的方式，让用户能够方便地从下拉菜单中选择日期。通过理解并分析压缩包中的文件，开发者不仅可以直接应用此代码，还可以根据自己的需求进行二次修改，...

    日期下拉函数及案例

    一种常见的方式是使用`&lt;option&gt;`标签创建一个包含所有日期的下拉列表。每个`&lt;option&gt;`标签对应一个日期，用户可以通过下拉菜单选择。另一种更先进的方法是利用HTML5的`&lt;input type="date"&gt;`，这将提供一个内置的日历...

    select 下拉列表联动 省市 日期 简单易用

    下拉列表联动 省市 日期 应有尽有，为了大家方便 拿出来分享 /* PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.02 完整版 *\ 　制作时间:2005-12-30 　更新时间:2006-01-24 　数据修正...

    下拉列表使用

    为了实现更复杂的功能或更好的视觉效果，开发者有时会选择用JavaScript库（如Select2、Chosen等）来模拟下拉列表，这些库提供了搜索、多选等特性。 在提供的TestDemo中，很可能是包含了上述一些概念的简单示例，...

    TextBox 点击出现日历下拉列表

    在IT领域，尤其是在Web开发或桌面应用程序设计中，"TextBox点击出现日历下拉列表"是一种常见的用户界面（UI）交互功能。这个功能允许用户通过一个简单的文本输入框（TextBox）来选择日期，而不是手动输入，提高了...

    基于vue2的一个日历列表组件类似各类旅游网站的出行日期选择控件

    在IT行业中，前端开发是至关重要的一个领域，而Vue.js作为一款流行的JavaScript框架，因其易学易用、组件化开发的特性受到了广大开发者们的青睐。本项目“基于vue2的一个日历列表组件类似各类旅游网站的出行日期选择...

    jQuery实现动态生成年月日级联下拉列表示例

    总之，通过这个示例，我们可以学习到如何使用jQuery动态生成和更新级联的年月日下拉列表，以及如何处理JavaScript中的日期和闰年判断。这个方法适用于各种需要用户选择日期的场景，提高了用户体验并简化了开发过程。

    asp.net 真正的下拉日期控件

    2. **日期导航**：下拉列表中可能包含向前和向后的按钮，方便用户在不同月份之间切换。 3. **格式化输出**：控件可以自动按照指定的日期格式（如"yyyy-MM-dd"）显示所选日期。 4. **验证功能**：控件可能集成了日期...

    js日历代码,选择日期和时间代码

    对于时间选择，可以添加额外的输入框或下拉列表来让用户选择小时和分钟，然后结合日期进行处理。 总的来说，创建一个JavaScript日历组件涉及到理解JavaScript的Date对象、DOM操作以及事件处理。通过结合HTML布局、...

    年、月、日三级联动下拉菜单

    这种功能通常用于表单中的日期选择器，通过下拉列表的方式让用户选择具体的日期。本文将详细介绍如何使用JavaScript实现一个简单的年、月、日三级联动的下拉菜单，并解释其工作原理。 #### 二、技术背景 在网页开发...

    Asp.net下拉日期控件源码及演示.zip

    这种控件通常会提供日、月、年的下拉列表，使得日期选择更为便捷，同时减少了输入错误的可能性。 2. 源码解析 该压缩包包含的源码提供了控件的实现细节，开发者可以通过阅读源码了解其工作原理。源码通常包括以下几...

    下拉框选择年月日代码

    - **初始化日期**：根据当前年份和月份计算出当月的最大天数，并填充日期下拉列表。 ```javascript function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 每个月的最大...

    javaScript日期三级级联

    总结一下，JavaScript日期三级级联的核心在于利用Date对象和事件监听器动态更新下拉列表的内容，同时要处理好闰年和平年的边界情况。通过这样的交互设计，用户可以在选择日期时得到无缝的体验，避免了无效日期的选取...

    一个用javascript写的简单实用的日期控件

    这个"动网下拉日期"控件，可能是一个下拉式的日历选择器，用户点击后会展开一个包含日期的列表，让用户直观地选取所需的日期，而不是手动输入。 JavaScript的日期处理能力十分强大，通过内置的Date对象，开发者可以...

Magicbox
Global site tag (gtag.js) - Google Analytics