日历查询"/>
HTML+CSS+原生JS实现简单的日历查询
首先话不多说上效果图。
大体思路：
1.日历布局
采用简单css+div,首先外面一个大盒子（div），年份月份和查询按钮装在一个盒子里并放在大盒子的顶部，星期和天数放在大盒子里面，然后再对高宽居中等慢慢调整。
2.年份月份自动生成
采用for循环，部分代码如下：
//获取年份与月份select下拉标签var oyear=document.getElementById("year");var omonth=document.getElementById("month");for(var i=1900; i<=2050;i++){//生成option下拉列表选项标签节点var iyear=document.createElement('option'); //向标签添加内容和赋值iyear.innerHTML=i;iyear.value=i;//将标签挂载到下拉列表中oyear.appendChild(iyear);
}
for(var i=1; i<=12;i++){var imonth=document.createElement('option');imonth.innerHTML=i;
//这里的i是1-12，后面会用到的Date函数在向里面传参时是0-11表示1月到12月，所以值减1imonth.value=i-1;omonth.appendChild(imonth);
} 3.根据年月正确地显示日历
《1》根据年月获取当月第一天为星期几。
《2》根据月份判断当月有多少天，其中2月较为特殊，闰年为29天，其他为28天，需用if做判断。
《3》知道了当月天数和第一天星期几后就可以将日期循环到列表中显示
部分代码如下：
function query(){ //得到用户选择的年月var getyear=oyear.value,getmoth=omonth.value,//获取当月第一天firstday=new Date(getyear,getmoth).getDay();//由于获取到的星期日的值为0，所以这里做个判断改为7if( firstday==0){ firstday=7;}//将各月天数存放在一个数组中。2月暂时默认28天var days=[31,28,31,30,31,30,31,31,30,31,30,31];//判断闰年，如果是则2月天数改为29if (getyear%4==0&&(getyear%100!==0||getyear%400==0)){days[1]=29; }//根据月份得到当月多少天var odaydata=days[getmoth]; //获取到所有的存放日期的li格子var oday=document.querySelectorAll("#day li"); //每次查询清空上一次的日期 oday.forEach(function(e){e.innerHTML="";});//将日期循环到列表中显示 for(var i=1;i<=odaydata;i++){oday[i+ firstday-2].innerHTML=i; }
}4.将query（）函数绑定到查询按钮上，即
<input type="button" value="查询" onclick="query()"/>
选好年月点击查询即可。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{
margin: 0;
padding: 0;
}
#box{
padding: 0;
width: 420px;
height: 426px;
margin: 0px auto;
border: 1px solid #CEF2FF;
}
#detanav{
margin: 0;
padding: 0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
float: left;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 0;
padding: 0;
border-bottom:1px solid #CEF2FF ;
}
#nav{
margin:100px auto 0 auto ;
width: 420px;
height: 30px;
border: 1px solid #CEF2FF;
padding: 0;
}
select{
margin-left:50px ;
float: left;
width: 55px;
height: 30px;
text-align: center;
line-height: 30px;
}
p{
float: left;
text-align: center;
line-height: 30px;
}
input{
margin-left: 60px;
margin-top: auto;
margin-bottom: auto;
width:50px ;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="nav">
<select id="year"></select><p>年</p>
<select id="month"></select><p>月</p>
<input type="button" value="查询" onclick="query()"/>
</div>
<div id="box">
<div id="detanav">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
</ul>
</div>
<div>
<ul id="day">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
var oyear=document.getElementById("year");
var omonth=document.getElementById("month");
var oday=document.getElementById("day");
for(var i=1900; i<=2050;i++){
var iyear=document.createElement('option');
iyear.innerHTML=i;
iyear.value=i;
oyear.appendChild(iyear);
}
for(var i=1; i<=12;i++){
var imonth=document.createElement('option');
imonth.innerHTML=i;
imonth.value=i-1;
omonth.appendChild(imonth);
}
function query(){ //得到用户选择的年月
var getyear=oyear.value,
getmoth=omonth.value,//获取当月第一天
firstday=new Date(getyear,getmoth).getDay();
//由于获取到的星期日的值为0，所以这里做个判断改为7
if( firstday==0){ firstday=7;}
//将各月天数存放在一个数组中。2月暂时默认28天
var days=[31,28,31,30,31,30,31,31,30,31,30,31];
//判断闰年，如果是则2月天数改为29
if (getyear%4==0&&(getyear%100!==0||getyear%400==0)){
days[1]=29;
}
//根据月份得到当月多少天
var odaydata=days[getmoth];
//获取到所有的存放日期的li格子
var oday=document.querySelectorAll("#day li");
//每次查询清空上一次的日期
oday.forEach(function(e){
e.innerHTML="";
});
//将日期循环到列表中显示
for(var i=1;i<=odaydata;i++){
oday[i+ firstday-2].innerHTML=i;
}
}</script>
</body>
</html>
更多推荐
HTML+CSS+原生JS实现简单的日历查询
发布评论