JS里日历的两种写法
1、运用创造元素的方法进行编写：
<!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=1990;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)
}
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"
}
}
}
}
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{
//当满足月份是2月且不是闰年的时候让天数变成28天
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"
}
}1
}
}
</script>
得到的结果为：
2、调用时间函数的方法来书写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select id="nian" onclick="Bian()"></select>年
<select id="yue" onclick="Bian()"></select>月
<select id="ri"></select>日
<!--<div id="wai">
<div class="list" onclick="Xuan(this)" onmouseover="Huan(this)" onmouseout="Hui()">山东</div>
<div class="list" onclick="Xuan(this)" onmouseover="Huan(this)" onmouseout="Hui()">淄博</div>
<div class="list" onclick="Xuan(this)" onmouseover="Huan(this)" onmouseout="Hui()">张店</div>
</div>
</body>-->
<script type="text/javascript">
FillYear();
FillYue();
FillTian();
function FillYear()
{
var b = new Date();
var nian = parseInt(b.getFullYear());
var str;
for(var i=nian-5;i<nian+6;i++)
{
if(i==nian)
{
str = str+"<option selected='selected'>"+i+"</option>";
}
else
{
str = str+"<option>"+i+"</option>";
}
}
document.getElementById("nian").innerHTML = str;
}
function FillYue()
{
var b = new Date();
var y = parseInt(b.getMonth()+1);
var str;
for(var i=1;i<13;i++)
{
if(i==y)
{
str = str+"<option selected='selected'>"+i+"</option>";
}
else
{
str = str+"<option>"+i+"</option>";
}
}
document.getElementById("yue").innerHTML = str;
}
function FillTian()
{
//alert("ssss");
var b = new Date();
var r = parseInt(b.getDate());
var nian = document.getElementById("nian").value;
var yue = document.getElementById("yue").value;
ts=31;
if(yue==4 || yue==6 || yue==9 || yue==11)
{
ts=30;
}
if(yue==2)
{
if((nian%4==0 && nian%100!=0) || nian%400==0)
{
ts=29;
}
else
{
ts=28;
}
}
var str;
for(var i=1;i<ts+1;i++)
{
if(i==r)
{
str = str+"<option selected='selected'>"+i+"</option>";
}
else
{
str = str+"<option>"+i+"</option>";
}
}
document.getElementById("ri").innerHTML = str;
}
function Bian()
{
FillTian();
}
</script>
得到的结果为：
虽然两种方法不太一样，但在对于月份中的天数的判断条件上来说大体都是相同的！首先进行闰年的判断！然后在将有30天的月份列出来最后将满足闰年的年出现时将2月份天数变成29天！
