2018-12-01

万年历查询（JavaScript实现)

实现的界面有点单调，查询功能已经实现，之后还可以添加一下其他功能。。

效果：

每一个日期个是由

标签构成，然后根据获取到的年和月进行计算，然后对

标签赋值。在JS代码中，变量有一点点瑕疵，有待改进，但不影响正常功能。后续如果加入功能，可能会有一点影响。具体代码如下：

HTML部分：

请选择年份

年

请选择月份

月

查询

---

一二三四五六日

这里的li标签可以使用JS动态添加。。。

CSS部分：

.box{

width: 500px;

height: 400px;

border: 3px solid black;

position: relative;

top: 50px;

margin: auto auto;

}

select{

position: relative;

top: 0px;

left: 10px;

width: 100px;

height: 30px;

margin: 20px 10px 0px 10px;

}

button{

width: 50px;

height: 30px;

position: relative;

top: 0px;

}

hr{

width: 100%;

height: 2px;

color: black;

}

span{

font-size: 19px;

width: 50px;

padding:23.5px;

}

ul{

position: relative;

top: 0px;

left: -35px;

list-style: none;

}

li{

text-align: center;

padding: 7.5px;

margin-left: 0.5px;

width: 50px;

height: 30px;

float: left;

font-size: 19px;

}

.week{

position: relative;

top:0px;

left: 4px;

}

li:hover{

background-color: gray;

}

JS部分：

window.onload=function(){

var oyear=document.getElementById("year");

var omonth=document.getElementById("month");

var oli=document.getElementsByTagName("li");

var m_day=[31,28,31,30,31,30,31,31,30,31,30,31];

for(var i=1900;i<=2050;i++)

{

var option=document.createElement("option");//创建一个新的节点//

option.innerHTML=i;

option.value=i;

oyear.appendChild(option);

}

for(var i=1;i<=12;i++)

{

var option=document.createElement("option");//创建一个新的节点//

option.innerHTML=i;

option.value=i-1;

omonth.appendChild(option);

}

var osearch=document.getElementById("search");

osearch.onclick=Search;

function Search(){

each(function(i){

oli[i].innerHTML="";

},0,oli.length-1);

//用户 选择了什么年份以及月份，必须全选//

var selyear=oyear.value;//获取选中的年份值//

var selmonth=omonth.value;//获取选中的月份//

var thistime=new Date(selyear,selmonth,1);

var firstday=thistime.getDay();

if(firstday==0)//如果当月第一天是周日

{

firstday=7;

}

each(function(i){

oli[firstday-2+i].innerHTML=i;

},1,getdaynum(selyear,selmonth));

}

function getdaynum(selyear,selmonth){

if(selyear%4==0&&selyear%100!=0||selyear%400!=0){

m_day[1]=29;

return m_day[selmonth];

}

m_day[1]=28;

return m_day[selmonth];

};

function each(callback,min,max){//这是把遍历封装，也可以直接用for循环

for(var i=min;i<=max;i++){

callback(i)

}

}

}

END.