betway必威-betway必威官方网站
做最好的网站

下拉框显示当前日期

亟需增添的地点:

福寿年高效果与利益:

复制代码 代码如下:

1,年份按此年度前后各10年选区范围,同有的时候间提供自由选拔

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

2,月份选拔

测量试验代码:

3,日期的点击采取

复制代码 代码如下:

4,FF浏览器帮忙不佳!!

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

技术:HTML CSS Javascript

其次种格局:没有需求事先写好年度,可扩大性比较好

 

[Ctrl A 全选 注:如需引进外界Js需刷新能力实践]

 

其三种艺术:不能用,但编制程序思路还是能够,借使正式使用提议用第三种格局

上边包车型客车代码未有将js分离,尽管急需,直接分手就足以了

复制代码 代码如下:

<!DOCTYPE html>
<head>
<meta charset='utf-8' />
<script type='text/javascript' src='./nino_calendar.js' ></script>
</head>

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

<body>
<div id='calendar'>
</div>

您恐怕感兴趣的稿子:

  • js下拉精选框与输入框联合浮动实现增多选中值到输入框的法门
  • JS落成的5级联动Select下拉选择框实例
  • 自定义的叁个简短洋气js下拉选择框
  • js 自定义性格下拉挑选框示例
  • select下拉采纳框美化实今世码(js css 图片)
  • js 动态选中下拉框
  • Js获取下拉框选定项的值和文书的兑当代码
  • JS操作select下拉框动态变动(创造/删除/获取)
  • js csss完成的叁个带复选框的下拉框
  • JS轻巧设置下拉摘取框暗中同意值的秘籍

</body>
<style type='text/css' >
#calendar{ margin:20px auto; width:200px;}
tr#nino_calendar_weekname,td.nino_calendar_tomonth,td.nino_calendar_nottomonth,td.nino_calendar_today{ font-family:"Arial","Microsoft Yahei"; text-align:center; padding:3px; cursor:crosshair;}
tr#nino_calendar_weekname td {background:#EEE; color:#000; }
tr#nino_calendar_weekname td:hover{background:#666; color:#FFF;}
td.nino_calendar_tomonth{ background:#EEE; color:#000;}
td.nino_calendar_tomonth:hover{background:#666; color:#FFF;}
td.nino_calendar_nottomonth{ background:#EEE; color:#FFF;}
td.nino_calendar_nottomonth:hover{background:#CCC; color:#666;}
td.nino_calendar_today{ background:#999; color:#FFF;}
td.nino_calendar_today:hover{background:#666; color:#FFF;}
input#nino_calendar_year_i,input#nino_calendar_month_i,input#nino_calendar_day_i{ width:40px;}
select#nino_calendar_year_select,select#nino_calendar_month_select{background:#444; color:#FFF;}
input#nino_calendar_b{ width:100%;}
</style>
<script type='text/javascript' >
/*
Calendar
use Nino_Calendar.setCalDays(2012,2,2)
Copyright 2013,  EI Nino
Email: [email protected]
*/
function stopBubble(){  
 if (window.event) {
  event.cancelBubble=true;
 } else {
  event = arguments[0];
  event.stopPropagation();
 }
}
var Nino_Calendar = {
 idName : "calendar",
 calId:"nino_calendar",
 monthDays : new Array(31,28,31,30,31,30,31,31,30,31,30,31),
 init: function(idName,calId){
  /*
  可选init,$1 为外界填充div的id,$2 为calendar的id和id前缀
  */
  Nino_Calendar.idName = idName;
  Nino_Calendar.calId=calId;
 },
 getMonthsDays:function (year){
   /*
   获取月份的时局
   */
  var date = new Date();
  if(arguments.length==0)
   var year=date.getFullYear();
  var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  if((year%4==0)&&(year0!=0) || (year@0==0))
  {
   monthDays[1]=29;
  }
  Nino_Calendar.monthDays=monthDays;
  return monthDays;
  },
 getTotalDays :function (d,m){
   /*
   获取总天数
   */
   if(arguments.length==0)
   {
    var d = date.getDate();
    var m = date.getMonth();
   }
   var days =0;
   var i=0
   for(; i<m; i )
   {
    days = Nino_Calendar.monthDays[i];
   }
   return days d;
  },
 setCalDays:function (year,month,day){
  /*
  设置日历
  */
  var date = new Date();
  if(arguments.length==0)
   var year = date.getFullYear();
  if(arguments.length<=1)
   var month = date.getMonth() 1;
  if(arguments.length<=2)
   var day = date.getDate();
  if(arguments.length==3){
   date = new Date(year,month,day);
  }

  Nino_Calendar.getMonthsDays(year);
  var cal = document.getElementById(Nino_Calendar.idName);
  var calBody="<table id='" Nino_Calendar.calId "'>";
  calBody ="<tr id='" Nino_Calendar.calId "_weekname'><td colspan=4 id='" Nino_Calendar.calId "_year' >" year " 年</td><td colspan=3 id='" Nino_Calendar.calId "_month' name='" day "' >" month " 月</td></tr>";
  calBody ="<tr id='" Nino_Calendar.calId "_weekname'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
  month = month-1;
  var preMonthDays = Nino_Calendar.monthDays[(month==0 ? 11 : month-1)];
  var tmp_date = new Date(year,month,1);
  preMonthDays=preMonthDays-tmp_date.getDay();
  var i=0;
  
  for(var ii=preMonthDays 1; i<tmp_date.getDay(); i ,ii )
  {
   if(i%7==0){
    calBody ="<tr class='" Nino_Calendar.calId "_day_num'>";
   }
   calBody ="<td class='" Nino_Calendar.calId "_nottomonth' >" ii "</td>";
   if(i%7==6)
   {
    calBody ="</tr>";
   }
  }
  for(var ii=1; ii<=Nino_Calendar.monthDays[month]; i ,ii )
  {
   if(i%7==0){
    calBody ="<tr class='" Nino_Calendar.calId "_day_num'>";
   }
   if(ii==day)
   {
    calBody ="<td class='" Nino_Calendar.calId "_today' >" ii "</td>";
   }else{
   calBody ="<td class='" Nino_Calendar.calId "_tomonth' >" ii "</td>";
   }
   if(i%7==6)
   {
    calBody ="</tr>";
   }
  }
  for(var ii=1; i<42; i ,ii )
  {
   if(i%7==0){
    calBody ="<tr class='" Nino_Calendar.calId "_day_num'>";
   }
   calBody ="<td class='" Nino_Calendar.calId "_nottomonth' >" ii "</td>";

本文由betway必威发布于网页设计,转载请注明出处:下拉框显示当前日期

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。