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))
        }

(0)

相关推荐

  • js实现日期级联效果

    复制代码 代码如下: <div>        <select name="YYYY" onchange="YYYYMM(this.value)">            <option value="">请选择 年</option>        </select>        <select name="MM" onchange="MMDD(th

  • js实现省市级联效果分享

    本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var shengArr =new Array(); shengArr[&qu

  • js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • js实现新年倒计时效果

    一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的2015年大家都收获了什么? 本文实例讲述了js实现新年倒计时效果代码.分享给大家供大家参考.具体如下: 运行效果图: 具体代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

  • JS实现日期时间动态显示的方法

    本文实例讲述了JS实现日期时间动态显示的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>js日期时间动态显示</title> </head> <body> <div id='jnkc'></div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString

  • JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

    本文实例讲述了JS获取日期的方法.分享给大家供大家参考,具体如下: 原理很简单,一天的时间的毫秒数是1000*60*60*24, 前n天的日期就是现在日期换成毫秒-n*1000*60*60*24. 再把这个值换成日期即可(通过setTime方法) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • js时间日期格式化封装函数

    js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦. 用到知识点: arguments:该对象代表正在执行的函数和调用它的函数的参数.不可显式创建,虽然有length属性,且能像数

  • jQuery实现日期联动效果实例

    本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

  • js实现小时钟效果

    本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下 今天给大家分享一下制作小时钟 先给大家把代码分享出来 首先 JavaScript 代码 <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //获取现在的年份. var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11:所以进行加 1 操作: var date =

  • Xadmin+rules实现多选行权限方式(级联效果)

    行权限配置 xadmin中配置且不需要数据库支持, 安装并配置rules pip安装: pip install rules 配置settings.py # settings.py INSTALLED_APPS = ( # ... 'rules', ) AUTHENTICATION_BACKENDS = ( 'rules.permissions.ObjectPermissionBackend', 'django.contrib.auth.backends.ModelBackend', ) 配置mo

随机推荐