HTML+CSS+原生JS实现简单的日历查询

最新推荐文章于 2024-07-31 14:35:30 发布

webxjz

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量2.3k

点赞数 1

分类专栏：原生JS编程编程思路文章标签：日历原生JS CSS+DIV 前端

本文链接：https://blog.csdn.net/weixin_44158475/article/details/85266159

版权

原生JS编程同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

编程思路

1 篇文章 0 订阅

订阅专栏

首先话不多说上效果图。

在这里插入图片描述

在这里插入图片描述
大体思路：
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月，所以值减1
    imonth.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，所以这里做个判断改为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;		    
    }			   
}

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>

webxjz

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+原生JS实现简单的日历查询

首先话不多说上效果图。大体思路：1.日历布局采用简单css+div,首先外面一个大盒子（div），年份月份和查询按钮装在一个盒子里并放在大盒子的顶部，星期和天数放在大盒子里面，然后再对高宽居中等慢慢调整。2.年份月份自动生成采用for循环，部分代码如下： var oyear=document.getElementById(&amp;amp;quot;year&amp;amp;quot;); var omonth=d...
复制链接

扫一扫

专栏目录