首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

javascript 下拉框显示当前日期

所属分类： 网络编程 / JavaScript 阅读数： 1823
收藏 0 赞 0 分享

需要增加的地方：

复制代码 代码如下:

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

第二种方法：不需要事先写好年份，可扩展性比较好

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

第三种方法:不能用，但编程思路还可以，如果正式使用建议用第二种方法
复制代码 代码如下:

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


更多精彩内容其他人还在看

纯javascript判断查询日期是否为有效日期

很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码，推荐给大家，有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等，本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码，推荐给大家，有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22