PHP-Z

前端

javascript 下拉框显示当前日期

2016-9-4 09:24 发布者: 大熊猫
JavaScript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


下拉框显示当前日期的代码,前提是年份里面要包含当前年份的代码,否则不能运行。

需要增加的地方:


<option value="2010">2010</option> 
<option value="2011">2011</option> 
<option value="2012">2012</option> 
<option value="2013">2013</option> 

测试代码:

<html> 
<head> 
<meta name="GENERATOR" content="Microsoft FrontPage 6.0"> 
<meta name="ProgId" content="FrontPage.Editor.Document"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>* 您消费的时间</title> 
</head> 
<body> 
<table width="500" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="22%" height="25" bgcolor="F7F7F7"> 
<span class="title_red STYLE2">* </span>您消费的时间 
</td> 
<td width="20%" bgcolor="F7F7F7"> 
<select id="years"> 
<option value="2007">2007</option> 
<option value="2008">2008</option> 
<option value="2009">2009</option> 
<option value="2010">2010</option> 
<option value="2011">2011</option> 
<option value="2012">2012</option> 
<option value="2013">2013</option> 
</select> 年 
</td> 
<td width="15%" bgcolor="F7F7F7"> 
<select id="months"> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
</select> 月 
</td> 
<td width="15%" bgcolor="F7F7F7"> 
<select id="days"> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 日 
</td> 
<td width="15%" bgcolor="F7F7F7"> 
<select id="hours"> 
<option value="00">00</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
</select> 点 
</td> 
<td width="15%" bgcolor="F7F7F7"> 
<select id="mins"> 
<option value="00">00</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
<option value="32">32</option> 
<option value="33">33</option> 
<option value="34">34</option> 
<option value="35">35</option> 
<option value="36">36</option> 
<option value="37">37</option> 
<option value="38">38</option> 
<option value="39">39</option> 
<option value="40">40</option> 
<option value="41">41</option> 
<option value="42">42</option> 
<option value="43">43</option> 
<option value="44">44</option> 
<option value="45">45</option> 
<option value="46">46</option> 
<option value="47">47</option> 
<option value="48">48</option> 
<option value="49">49</option> 
<option value="50">50</option> 
<option value="51">51</option> 
<option value="52">52</option> 
<option value="53">53</option> 
<option value="54">54</option> 
<option value="55">55</option> 
<option value="56">56</option> 
<option value="57">57</option> 
<option value="58">58</option> 
<option value="59">59</option> 
</select> 分 
</td> 
</tr> 
</table> 
<script> 
var today=new Date()//定义一个时间对象 
var yy=today.getYear() 
var mm=today.getMonth()+1 
var dd=today.getDate() 
var h=today.getHours()//定义小时 
var m=today.getMinutes()//定义分钟 
document.getElementById("years").options(yy-2007).selected=1 
document.getElementById("months").options(mm-1).selected=1 
document.getElementById("days").options(dd-1).selected=1 
document.getElementById("hours").options(h).selected=1 
document.getElementById("mins").options(m).selected=1 
</script> 
</body> 
</html> 

第二种方法:不需要事先写好年份,可扩展性比较好
<script type="text/javascript">//日期下拉框 
// 风云突变 
// 2003-9 
//计算月份天数(闰年),Year 年,Month 月 
function LeapYear(Year, Month) 
{ switch (parseInt(Month)) 
{ case 2: return ((Year%4 == 0) && (Year%100 != 0) || (Year%400 == 0)) ? 29 : 28; case 4: case 6: case 9: case 11: return 30; default: return 31; 
} 
} 
//改变天数下拉框,YearObj 年下拉框对象,MonthObj 月下拉框对象,DayObj 日下拉框对象 
function ChangeDay(YearObj, MonthObj, DayObj) 
{ DayObj.options.length = 0; 
for (var i=1; i<=LeapYear(YearObj.value, MonthObj.value); i++) 
DayObj.options.add(new Option(i, i)); 
if (MonthObj.value == iDate.getMonth()+1 && YearObj.value == iDate.getYear()) 
DayObj.selectedIndex = iDate.getDate()-1; 
} 
//建立日期年月日下拉框,可指定日期参数,无参数显示当前日期 
function CreateDateSelect(y, m, d) 
{ document.write('<select name="iYear1" onChange="ChangeDay(this, document.all.iMonth1, document.all.iDay1)">'); 
for (var i=100; i>=0; i--) 
document.write('<option value="' + (iDate.getYear()-i) + '"' + (iDate.getYear()-i == y ? ' selected' : '') + '>' + (iDate.getYear()-i) + '</option>'); 
document.write('</select> 年  '); 
if (!y) 
document.all.iYear1.selectedIndex = 100; 
document.write('<select name="iMonth1" onChange="ChangeDay(document.all.iYear1, this, document.all.iDay1)">'); 
for (var i=1; i<13; i++) 
document.write('<option value="' + i + '"' + (i == m ? ' selected' : '') + '>' + i + '</option>'); 
document.write('</select> 月  '); 
if (!m) 
document.all.iMonth1.selectedIndex = iDate.getMonth(); 
document.write('<select name="iDay1">'); 
for (var i=1; i<=LeapYear(iDate.getYear(), iDate.getMonth()+1); i++) 
document.write('<option value="' + i + '"' + (i == d ? ' selected' : '') + '>' + i + '</option>'); 
document.write('</select> 日'); 
if (!d) 
document.all.iDay1.selectedIndex = iDate.getDate()-1; 
} 
var iDate = new Date(); 
CreateDateSelect(); 
</script>
第三种方法:不能用,但编程思路还可以,如果正式使用建议用第二种方法

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
<script> 
function setDay(obj){ 
obj = obj.form; 
var years=parseInt(obj.years.options[obj.years.selectedIndex].value); 
var months=parseInt(obj.months.options[obj.months.selectedIndex].value); 
if(obj.years.selectedIndex==0 || obj.months.selectedIndex==0)return; 
var lastday = monthday(years,months); 
var itemnum = obj.days.length; 
if (lastday - 1 < obj.days.selectedIndex) 
{ 
obj.days.selectedIndex = lastday - 1; 
} 
obj.days.length = lastday; 
for(cnt = itemnum + 1;cnt <= lastday;cnt++) 
{ 
obj.days.options[cnt - 1].text = cnt; 
} 
} 
function monthday(years,months) 
{ 
var lastday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
if (((years % 4 == 0) && (years % 100 != 0)) || (years % 400 == 0)) 
{ 
lastday[1] = 29; 
} 
return lastday[months - 1]; 
} 
function forto(ff,to) 
{ 
document.write('<OPTION value=""></OPTION>'); 
for(var ii=ff; ii<=to; ii++) 
document.write('<OPTION value="'+ii+'">'+ii+'</OPTION>'); 
} 
function a() 
{ 
alert(document.all("years").value+"年"+document.all("months").value+"月"+document.all("days").value+"日") ; 
} 
</script> 
<FORM> 
<SELECT name="years" onChange="setDay(this);"> 
<script>forto(1990,2030)</script> 
</SELECT>年  
<SELECT name="months" onChange="setDay(this);"> 
<script>forto(1,12)</script> 
</SELECT>月  
<SELECT name="days"></SELECT>日  
</form> 
</body> 
</html> 

关注微信公众号

top100summit

扫一扫关注微信公众号

PHP-Z_COM