下拉菜单三级互联小例

简介:

    不能不说这Web时代一切都风云变幻。富客户端再一次奇袭人们的眼球,看到很多网站使用了Flex技术,更多的WebGUI和Web前端交互的人性化,智能化带给我们的网上冲浪另一番滋味,哦,冲浪这个词都可以进互联网词汇的祠堂了,太久了。

      翻箱倒柜突然发现磁盘的某个磁道和盘面的夹缝中有一个曾曾经经写的下拉菜单三级互联的小例子,好像有回到了从前。在网上看到新奇的功能有不知道怎么实现的,就只能臆断和DIY,最后能够成个像模像样能开心半天。

    贴出来尿布娱乐下。

 
  1. <html> 
  2.     <head> 
  3.         <title>三级互联,javaScripty实现</title> 
  4.     </head> 
  5.     <script language="javaScript"> 
  6.               
  7.         var year;  
  8.         var month;  
  9.         var day;  
  10.       
  11.     //初始化显示信息  
  12.         function intial(){  
  13.             year=document.getElementById("year");  
  14.             month=document.getElementById("month");  
  15.             day=document.getElementById("day");  
  16.             intitalField(year, 2000, 2015);  
  17.             intitalField(month, 1,  12);  
  18.             intitalField(day, 1, 31);  
  19.         }  
  20.     //下拉菜单信息添加  
  21.         function intitalField(object, startNum, endNum){  
  22.             for(var i=startNum; i<=endNum; i++){  
  23.                 object.options.add(new Option(i, i));  
  24.             }  
  25.         }  
  26.     //闰年判断  
  27.         function isLeap(){  
  28.             year=document.getElementById("year");  
  29.             var yearyearValue=year.options(year.selectedIndex).value;  
  30.             return (yearValue%4==0&&yearValue%100!=0)||yearValue%400==0;  
  31.         }  
  32.     //下拉菜单显示处理  
  33.         function jugeDays(totalDays,len, day){  
  34.             var i;  
  35.             var j;  
  36.             if(len<totalDays){  
  37.                 for(i=len+1; i<=totalDays; i++){  
  38.                     day.add(new Option(i, i));  
  39.                 }  
  40.             }else if(len>totalDays){  
  41.                 for(j=len; j>totalDays; j--){  
  42.                     day.remove(j-1);  
  43.                 }  
  44.             }  
  45.         }  
  46.     //通过月份来获取该月的天数  
  47.         function days(){  
  48.             month=document.getElementById("month");  
  49.             day=document.getElementById("day");  
  50.             var monthmonthValue=month.options(month.selectedIndex).value;  
  51.             var len=day.length;  
  52.             var tag=isLeap();  
  53.             if(monthValue==4||monthValue==6||monthValue==9||monthValue==11){  
  54.                 jugeDays(30, len, day);  
  55.             }else if(monthValue==2){  
  56.                 if(tag){  
  57.                     jugeDays(29, len, day);   
  58.                       
  59.                 }else{  
  60.                     jugeDays(28, len, day);  
  61.                       
  62.                 }  
  63.             }else{  
  64.                 jugeDays(31, len, day);  
  65.             }  
  66.         }  
  67.  
  68.     </script> 
  69.       
  70.     <body onload="intial()" /> 
  71.         <select name="year" id="year" > 
  72.         </select> 
  73.         <select name="month" id="month" onchange="days()"> 
  74.         </select> 
  75.         <select name="day" id="day" > 
  76.         </select> 
  77.     </body> 
  78. </html> 

       现在看到都于心不忍啊。看到这些那才叫时光荏苒啊,天天学习,好好向上,不然对不起那些年的憨厚十足的劲。。

      存在了,拿来主义的用;不存在的,想想如何个弄出来;不造重复的轮子,当然学习的时候还是试试造几个山寨版轮在,要不然都没有上面这些代码了。



本文转自 secondriver 51CTO博客,原文链接:http://blog.51cto.com/aiilive/1062576,如需转载请自行联系原作者

相关文章
|
7月前
|
前端开发
二级水平导航菜单栏的实现
二级水平导航菜单栏的实现
115 1
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
数据库
第一次机房收费系统之下机
第一次机房收费系统之下机
114 0
技术汇总:第四章:使用Easyui做三级下拉列表
技术汇总:第四章:使用Easyui做三级下拉列表
技术汇总:第四章:使用Easyui做三级下拉列表
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
|
前端开发
前端工作总结128-一级控制二级菜单的变化
前端工作总结128-一级控制二级菜单的变化
109 0
前端工作总结128-一级控制二级菜单的变化
|
存储 人工智能 算法
如何把门禁卡做成你用不起的样子?B站up主自制迷你卡片,公司小区通刷,还带墨水屏的那种
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 这次,野生钢铁侠稚晖君带着他的硬核项目又来了。 上次自制纯手工打造AI小电视,播放量就超过300万,还登上了b站首页。
如何把门禁卡做成你用不起的样子?B站up主自制迷你卡片,公司小区通刷,还带墨水屏的那种