2018-12-01
万年历查询（JavaScript实现)
实现的界面有点单调，查询功能已经实现，之后还可以添加一下其他功能。。
效果：
每一个日期个是由<li>标签构成，然后根据获取到的年和月进行计算，然后对<li>标签赋值。在JS代码中，变量有一点点瑕疵，有待改进，但不影响正常功能。后续如果加入功能，可能会有一点影响。具体代码如下：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/calender.css" />
<script type="text/javascript" src="js/calender.js" ></script>
</head>
<body>
<div class="box">
<select id="year">
<option value="">请选择年份</option>
</select>
年
<select id="month">
<option value="">请选择月份</option>
</select>
月
<button id="search">查询</button>
<hr />
<div class="week"><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span></div>
<ul class="day">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><br />
</ul>
</div>
</body>
</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)
}
}
}
