js实现日期级联效果

 更新时间:2014年01月23日 10:07:22   作者:  
本篇文章主要是对js实现日期级联效果的实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

复制代码 代码如下:

    <div>
        <select name="YYYY" onchange="YYYYMM(this.value)">
            <option value="">请选择 年</option>
        </select>
        <select name="MM" onchange="MMDD(this.value)">
            <option value="">选择 月</option>
        </select>
        <select name="DD">
            <option value="">选择 日</option>
        </select>
    </div>

    <script language="JavaScript">
        function window.onload() {
            strYYYY = document.form1.YYYY.outerHTML;
            strMM = document.form1.MM.outerHTML;
            strDD = document.form1.DD.outerHTML;
            MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            //先给年下拉框赋内容
            var y = new Date().getFullYear();
            var str = strYYYY.substring(0, strYYYY.length - 9);
            for (var i = (y - 30); i < (y + 30); i++) //以今年为准,前30年,后30年
            {
                str += "<option value='" + i + "'> " + i + " 年" + "</option>\r\n";
            }
            document.form1.YYYY.outerHTML = str + "</select>";

            //赋月份的下拉框
            var str = strMM.substring(0, strMM.length - 9);
            for (var i = 1; i < 13; i++) {
                str += "<option value='" + i + "'> " + i + " 月" + "</option>\r\n";
            }
            document.form1.MM.outerHTML = str + "</select>";

            document.form1.YYYY.value = y;
            document.form1.MM.value = new Date().getMonth() + 1;
            var n = MonHead[new Date().getMonth()];
            if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
            writeDay(n); //赋日期下拉框
            document.form1.DD.value = new Date().getDate();
        }

        function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
        {
            var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
            if (MMvalue == "") { DD.outerHTML = strDD; return; }
            var n = MonHead[MMvalue - 1];
            if (MMvalue == 2 && IsPinYear(str)) n++;
            writeDay(n)
        }

        function MMDD(str) //月发生变化时日期联动
        {
            var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
            if (str == "") { DD.outerHTML = strDD; return; }
            var n = MonHead[str - 1];
            if (str == 2 && IsPinYear(YYYYvalue)) n++;
            writeDay(n)
        }

        function writeDay(n) //据条件写日期的下拉框
        {
            var s = strDD.substring(0, strDD.length - 9);
            for (var i = 1; i < (n + 1); i++)
                s += "<option value='" + i + "'> " + i + " 日" + "</option>\r\n";
            document.form1.DD.outerHTML = s + "</select>";
        }

        function IsPinYear(year)//判断是否闰平年
        {
            return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0))
        }

相关文章

  • JavaScript树形结构数组处理之递归问题

    JavaScript树形结构数组处理之递归问题

    这篇文章主要介绍了JavaScript树形结构数组处理之递归问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • js封装的textarea操作方法集合(兼容很好)

    js封装的textarea操作方法集合(兼容很好)

    对应用到对textarea处理的朋友可以参考下。控制的比较不错的代码封装。
    2010-11-11
  • 深入理解JavaScript中为什么string可以拥有方法

    深入理解JavaScript中为什么string可以拥有方法

    下面小编就为大家带来一篇深入理解JavaScript中为什么string可以拥有方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 200行HTML+JavaScript实现年会抽奖程序

    200行HTML+JavaScript实现年会抽奖程序

    这篇文章主要为大家详细介绍了HTML+JavaScript实现年会抽奖程序的200行代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • threejs后期处理的基本使用方法之加特效

    threejs后期处理的基本使用方法之加特效

    这篇文章主要给大家介绍了关于threejs后期处理的基本使用方法之加特效的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 在CSS里写复杂的JavaScript脚本

    在CSS里写复杂的JavaScript脚本

    在IE下,CSS里可以写入JavaScript脚本,不过,要用expression套住. 虽然可以这样,但是由于是在CSS里,这个特殊地方,所以,不能写成如下这样: width:expression(if(...){}else{...})
    2008-04-04
  • three.js镜头追踪的移动效果实例

    three.js镜头追踪的移动效果实例

    这篇文章主要为大家介绍了three.js镜头追踪的移动效果实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • javascript for循环性能测试示例

    javascript for循环性能测试示例

    这篇文章主要介绍了javascript for循环性能测试,结合实例形式分析了javascript使用for循环遍历数组的三种常用方法及对应的时间消耗,总结javascript使用for循环遍历数组的相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • javascript简单性能问题及学习笔记

    javascript简单性能问题及学习笔记

    最近在看一本书:《高性能javaScript》,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧
    2014-02-02
  • 详解微信小程序的 request 封装示例

    详解微信小程序的 request 封装示例

    这篇文章主要介绍了详解微信小程序的 request 封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论