div仿select做时间联动
首先我先从网络上下载了一个select版本的js时间联动 目前承认还是不太懂他的js原理 我这里只是把他的select版的改成了div仿selet的样式
以下是原版 :select 版的时间联动原代码
<html> <head> <title>年月日三下拉框联动</title> <meta charset="UTF-8"> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> </head> <body> <form name=form1> <select name=YYYY onchange="YYYYMM(this.value)"> <option value="">年</option> </select> <select name=MM onchange="MMDD(this.value)"> <option value="">月</option> </select> <select name=DD> <option value="">日</option> </select> </form> <script language="JavaScript"> window.onload = function(){ strYYYY = document.form1.YYYY.outerHTML; strMM = document.form1.MM.outerHTML; strDD = document.form1.DD.outerHTML; MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); var str = strYYYY.substring(0, strYYYY.length - 9); for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年 { str += "<option value='" + i + "'> " + i + "</option>\r\n"; } document.form1.YYYY.outerHTML = str +"</select>"; //赋月份的下拉框 var str = strMM.substring(0, strMM.length - 9); for (var i = 1; i < 13; i++) { str += "<option value='" + i + "'> " + i + "</option>\r\n"; } document.form1.MM.outerHTML = str +"</select>"; document.form1.YYYY.value = y; document.form1.MM.value = new Date().getMonth() + 1; var n = MonHead[new Date().getMonth()]; if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; writeDay(n); //赋日期下拉框 document.form1.DD.value = new Date().getDate(); } function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){DD.outerHTML = strDD; return;} var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n) } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (str == ""){DD.outerHTML = strDD; return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var s = strDD.substring(0, strDD.length - 9); for (var i=1; i<(n+1); i++) s += "<option value='" + i + "'> " + i + "</option>\r\n"; document.form1.DD.outerHTML = s +"</select>"; } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year%100 !=0 || year%400 == 0))} //--> </script> </body> </html>
下边是我改版的 核心代码是一样的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"> div,span,ul,li{padding:0px;margin:0px;} .year{width:100px;height:15px;border:1px solid #ccc;font-size:12px;float:left;} .year span{width:16px;height:17px;display:block;float:right;background:url(s_jt.jpg) 0 0 no-repeat;} .xs {float:left;} .quan{width:100px;height:100px;overflow-y:scroll;overflow-x:hidden;display:none;} .ulyear{width:100px;} .ulyear li{list-style-type:none;width:100px;} .month{width:100px;height:15px;border:1px solid #ccc;font-size:12px;margin-left:10px;float:left;} .dianmon{width:16px;height:17px;display:block;float:right;background:url(s_jt.jpg) 0 0 no-repeat;} .quanmon{width:100px;height:100px;overflow-y:scroll;overflow-x:hidden;display:none;} .ulmon{width:100px;} .ulmon li{list-style-type:none;width:100px;} .monxs{float:left;} .day{width:100px;height:15px;border:1px solid #ccc;font-size:12px;margin-left:10px;float:left;} .dianday{width:16px;height:17px;display:block;float:right;background:url(s_jt.jpg) 0 0 no-repeat;} .quanday{width:100px;height:100px;overflow-y:scroll;overflow-x:hidden;display:none;} .ulday{width:100px;} .ulday li{list-style-type:none;width:100px;} .dayxs{float:left;} </style> </head> <body> <div class="year"> <div class="xs">选择年份</div><!--把选的值打在这个div里--> <span class="dian"></span><!--下拉选项按钮--> <div class="quan"> <!--结果窗口--> <ul class="ulyear"></ul> </div> </div> <!--以下布局上是一样的--> <div class="month"> <div class="monxs"">选择月份</div> <span class="dianmon"></span> <div class="quanmon"> <ul class="ulmon"></ul> </div> </div> <div class="day"> <div class="dayxs">选择日期</div> <span class="dianday"></span> <div class="quanday"> <ul class="ulday"></ul> </div> </div> </body> <script type="text/javascript"> <!-- window.onload = function(){ //年份 var strYYYY = document.querySelector('.ulyear').outerHTML; //获取class为ulyear的outerHTML var strMM = document.querySelector('.ulmon').outerHTML; var strDD = document.querySelector('.ulday').outerHTML; var MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //这句是下载的时间联动的例子 我也不太懂 我只是把原来的select模式的时间联动改成了div仿select 的时间联动样式 var y = new Date().getFullYear(); //声明一个变量是获取年份的 document.querySelector('.dian').onclick=function(){ document.querySelector('.quan').style.display="block";//下拉窗口显示 var str = strYYYY.substring(0, strYYYY.length - 5); //获取strYYYY的第0-第5个字节 for (var i = (y-50); i < (y+1); i++) //以今年为准，前1年，后50年 { str += "<li value='" + i + "'> " + i + "</li>"; //创建li标签 把i值放进去 } document.querySelector('.ulyear').outerHTML = str +"</ul>"; //把li放进class为ulyear中 var lis=document.querySelector('.ulyear').getElementsByTagName('li'); //获取这里边的li标签 for (var i=0;i<lis.length ;i++ ) { lis[i].onclick=function(){ for (var ii=0;ii<lis.length ;ii++ ) { if (this == lis[ii]) { document.querySelector('.xs').innerHTML=lis[ii].innerHTML; //li的内容赋给document.querySelector('.xs') var yearvalue=lis[ii].getAttribute('value'); //获取点击的li的value属性值 document.querySelector('.xs').setAttribute("value",yearvalue); //设置document.querySelector('.xs')的value属性值yearvalue document.querySelector('.quan').style.display="none"; //窗口消失 YYYYMM(yearvalue); //把选中的li的传参给年 } } } } } //月份 document.querySelector('.dianmon').onclick=function(){ document.querySelector('.quanmon').style.display="block";//下拉窗口显示 var str = strMM.substring(0, strMM.length - 5); for (var i = 1; i < 13; i++) { str += "<li value='" + i + "'> " + i + "</li>"; } document.querySelector('.ulmon').outerHTML = str +"</ul>"; var lis=document.querySelector('.ulmon').getElementsByTagName('li'); for (var ii=0;ii<lis.length ;ii++ ) { lis[ii].onclick=function(){ for (var j=0;j<lis.length ;j++ ) { if (this == lis[j]) { document.querySelector('.monxs').innerHTML=lis[j].innerHTML; var monthvalue=lis[j].getAttribute('value'); document.querySelector('.monxs').setAttribute("value",monthvalue); document.querySelector('.quanmon').style.display="none"; MMDD(monthvalue) } } } } } var n = MonHead[new Date().getMonth()]; if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; document.querySelector('.dianday').onclick=function(){ document.querySelector('.quanday').style.display="block";//下拉窗口显示 } function writeDay(n) //据条件写日期的下拉框 { var s = strDD.substring(0, strDD.length - 5); for (var i=1; i<(n+1); i++) s += "<li value='" + i + "'> " + i + "</li>"; document.querySelector('.ulday').outerHTML = s +"</ul>"; var lis=document.querySelector('.ulday').getElementsByTagName('li'); for (var ii=0;ii<lis.length ;ii++ ) { lis[ii].onclick=function(){ for (var j=0;j<lis.length ;j++ ) { if (this == lis[j]) { document.querySelector('.dayxs').innerHTML=lis[j].innerHTML; var dayvalue=lis[j].getAttribute('value'); document.querySelector('.dayxs').setAttribute("value",dayvalue); document.querySelector('.quanday').style.display="none"; return; } } } } } function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.querySelector('.monxs').getAttribute("value"); if (MMvalue == null){ return; } var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n); } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.querySelector('.xs').getAttribute("value"); if (str == null){ return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year%100 !=0 || year%400 == 0))} } //--> </script> </html>
效果就是这样
点击按钮图片
