码迷,mamicode.com
首页 > 其他好文 > 详细

年月日时间表

时间:2017-07-28 20:57:33      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:第一个   val   制作   head   inner   循环   text   selected   creat   

制作这个时间选择的表,我第一想法就是写三个下拉列表框,之间再用事件连接起来。然后开始写,下拉列表用for循环很容易就写出来了。在连接的时候遇到了问题,第一个是怎么把我选中的这个数提取出来,因为要用来写判断条件。通过尝试找到这个selectedOptions[0].value,被选中第一项的属性值。下面遇到了更难解决的难题,就是每点击一次就会添加一次,不能保证是从初始状态开始的。最会实在是没有办法了,我想到可以添加一个样式,就是隐藏而且不占空间。而且样式就好去掉了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select size="1" id="a1" style="width: 60px;"></select>
<select size="1" id="a2" style="width: 50px;"></select>
<select size="1" id="a3" style="width: 50px;"></select>
<body>
</html>
<script>
a1=document.getElementById(‘a1‘)
a2=document.getElementById(‘a2‘)
a3=document.getElementById("a3")
for(i=1900;i<2018;i++){
o=document.createElement(‘option‘)
o.innerText=i
a1.appendChild(o)
}
for(j=1;j<13;j++){
p=document.createElement(‘option‘)
p.innerText=j
a2.appendChild(p)
}
for(k=1;k<32;k++){
q=document.createElement(‘option‘)
q.innerText=k
a3.appendChild(q)
}
a2.onchange=function(){
a3.options[28].style.display="inline"
a3.options[29].style.display="inline"
a3.options[30].style.display="inline"
n=a1.selectedOptions[0].value
m=a2.selectedOptions[0].value
if(n%4==0&&n%100!=0||n%400==0){
if(m==2){
a3.options[30].style.display="none"
a3.options[29].style.display="none"
}else{
if(m==4||m==6||m==9||m==11){
a3.options[30].style.display="none"
}
}
}else{
if(m==2){
a3.options[28].style.display="none"
a3.options[30].style.display="none"
a3.options[29].style.display="none"
}else{
if(m==4||m==6||m==9||m==11){
a3.options[30].style.display="none"
}
}
}
}
a1.onchange=function(){
a3.options[28].style.display="inline"
a3.options[29].style.display="inline"
a3.options[30].style.display="inline"
n=a1.selectedOptions[0].value
m=a2.selectedOptions[0].value
if(n%4==0&&n%100!=0||n%400==0){
if(m==2){
a3.options[30].style.display="none"
a3.options[29].style.display="none"
}else{
if(m==4||m==6||m==9||m==11){
a3.options[30].style.display="none"
}
}
}else{
if(m==2){
a3.options[28].style.display="none"
a3.options[30].style.display="none"
a3.options[29].style.display="none"
}else{
if(m==4||m==6||m==9||m==11){
a3.options[30].style.display="none"
}
}
}
}
</script>

年月日时间表

标签:第一个   val   制作   head   inner   循环   text   selected   creat   

原文地址:http://www.cnblogs.com/p774692352/p/7252358.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!