年月日时间表
Posted 0710赵冬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了年月日时间表相关的知识，希望对你有一定的参考价值。
制作这个时间选择的表，我第一想法就是写三个下拉列表框，之间再用事件连接起来。然后开始写，下拉列表用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>
以上是关于年月日时间表的主要内容，如果未能解决你的问题，请参考以下文章