Day012

本文介绍了一个基于JavaScript的日期选择器实现方法,包括年、月、日的联动菜单功能,同时展示了如何通过JavaScript来处理日期逻辑。此外,还讨论了数据库中常见约束的作用及用法,以及Array和ArrayList的区别。

1、按照下列要求,用JavaScript写一个年,月,日的联动菜单。

(1)默认显示当前日期;

(2)选择年才可以选择月,选择月才可以选择日,并且 2 月的天数要正确;

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>每日一练</title>  
  6. </head>  
  7. <body>  
  8.     <form name="dateInfo">  
  9.             <select name="yearName" onchange="testYear(this.value)">  
  10.                 <option value="">请选择年</option>  
  11.             </select>  
  12.             <select name="monthName" onchange="testMonth(this.value)">  
  13.                 <option value="">请选择月</option>  
  14.             </select>  
  15.             <select name="dayName">  
  16.                 <option value="">请选择日</option>  
  17.             </select>  
  18.         </form>  
  19.         <script>  
  20.             // 定义各个月份天数  
  21.             var monthTemp = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
  22.             /**  
  23.              * 页面完成加载完成后执行  
  24.              */  
  25.             window.onload = function() {  
  26.                 // 获取当前年份     
  27.                 var yearValue = new Date().getFullYear();  
  28.                 // 获取当前月份  
  29.                 var monthValue = new Date().getMonth() + 1;  
  30.                 // 以今年为准,前30年,后30年   
  31.                 for(var i = (yearValue - 30); i <= (yearValue + 30); i++) {  
  32.                     document.dateInfo.yearName.options.add(new Option(" " + i + " 年", i));  
  33.                 }  
  34.   
  35.                 // 月份的下拉框     
  36.                 for(var i = 1; i <= 12; i++) {  
  37.                     document.dateInfo.monthName.options.add(new Option(" " + i + " 月", i));  
  38.                 }  
  39.   
  40.                 // 设定年份  
  41.                 document.dateInfo.yearName.value = yearValue;  
  42.                 // 设定月份  
  43.                 document.dateInfo.monthName.value = monthValue;  
  44.                 // 获取当前月份的天数  
  45.                 var dayValue = monthTemp[monthValue - 1];  
  46.                 // 初始化日选项框  
  47.                 initDay(dayValue, monthValue, yearValue);  
  48.                 // 设置当前日  
  49.                 document.dateInfo.dayName.value = new Date().getDate();  
  50.             }  
  51.   
  52.             // 年发生变化时日期发生变化  
  53.             function testYear(yearValue) {  
  54.                 // 获取当前月份  
  55.                 var monthValue = document.dateInfo.monthName.value;  
  56.                 // 判断月份是否被选中,若未选中,则重置日选项框  
  57.                 if(monthValue == "") {  
  58.                     optionsClear(document.dateInfo.dayName);  
  59.                     return;  
  60.                 }  
  61.                 // 根据月份获取天数  
  62.                 var dayValue = monthTemp[monthValue - 1];  
  63.                 // 初始化日选项框  
  64.                 initDay(dayValue, monthValue, yearValue);  
  65.             }  
  66.   
  67.             // 月发生变化时日期联动     
  68.             function testMonth(monthValue) {  
  69.                 // 获取当前年份  
  70.                 var yearValue = document.dateInfo.yearName.value;  
  71.                 // 判断年份是否被选中,若未选中,则重置日选项框  
  72.                 if(yearValue == "") {  
  73.                     optionsClear(document.dateInfo.dayName);  
  74.                     return;  
  75.                 }  
  76.                 // 根据月份获取天数  
  77.                 var dayValue = monthTemp[monthValue - 1];  
  78.                 // 初始化日选项框  
  79.                 initDay(dayValue, monthValue, yearValue);  
  80.             }  
  81.   
  82.             // 初始化日选项框  
  83.             function initDay(dayValue, monthValue, yearValue) {  
  84.                 // 判断是否是2月份,并且判断是否为闰年  
  85.                 if(monthValue == 2 && isLeapYear(yearValue)) {  
  86.                     dayValue++;  
  87.                 }  
  88.                 // 获取当前日下拉框  
  89.                 var e = document.dateInfo.dayName;  
  90.                 // 重置下拉框  
  91.                 optionsClear(e);  
  92.                 // 填充日下拉框  
  93.                 for(var i = 1; i <= dayValue; i++) {  
  94.                     e.options.add(new Option(" " + i + " 日", i));  
  95.                 }  
  96.             }  
  97.   
  98.             // 判断是否闰平年     
  99.             function isLeapYear(year) {  
  100.                 // 闰年的定义是(可被4整除)且((不可被100整除)或(可被400整除))的年份  
  101.                 return(year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));  
  102.             }  
  103.   
  104.             // 重置下拉框  
  105.             function optionsClear(e) {  
  106.                 e.options.length = 1;  
  107.             }  
  108.         </script>  
  109. </body>  
  110. </html>  

输出结果:


2、常见的几种约束有哪些?分别代表什么意思?如何使用?

答:常用的约束有主键约束,外键约束,唯一约束,默认约束 。
主键:PRIMARY KEY(主键字段)保证了实体完整性,一个表只有一个主键,但一个主键可以包含多个字段,主键字段不能为空;
唯一:UNIQUE(约束字段)保证了实体完整性,一个表有多个唯一约束,一个唯一约束可有包含多个字段;
外键:FOREIGN KEY(外键字段),保证了引用完整性,一个表可以有多个外键;

默认值:DEFAULT(默认值的表达式或NULL),保证了域完整性,一个表可以有多个默认值约束,但是一个字段只有一个默认值。

3、数组(Array)和列表(ArrayList)有什么区别?什么时候应该使用 Array 而不是 ArrayList?

(1)存储内容比较:

Array 数组可以包含基本类型和对象类型,
ArrayList 却只能包含对象类型。
Array 数组在存放的时候一定是同种类型的元素。ArrayList 就不一定了 。

(2)空间大小比较:
Array 数组的空间大小是固定的,所以需要事前确定合适的空间大小。
ArrayList 的空间是动态增长的,而且,每次添加新的元素的时候都会检查内部数组的空间是否足够。

(3) 方法上的比较:
ArrayList 方法上比 Array 更多样化,比如添加全部 addAll()、删除全部 removeAll()、返回迭代器 iterator() 等。

适用场景:
如果想要保存一些在整个程序运行期间都会存在而且不变的数据,我们可以将它们放进一个全局数组里, 但是如果我们单纯只是想要以数组的形式保存数据,而不对数据进行增加等操作,只是方便我们进行查找的话,那么,我们就选择 ArrayList。
如果我们需要对元素进行频繁的移动或删除,或者是处理的是超大量的数据,那么,使用 ArrayList 就真的不是一个好的选择,因为它的效率很低,使用数组进行这样的动作就很麻烦,那么,我们可以考虑选择 LinkedList。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值