CSS+Javascript+Html日历控件

最新推荐文章于 2024-05-24 09:40:16 发布

游戏自学

最新推荐文章于 2024-05-24 09:40:16 发布

阅读量1.8k

点赞数

分类专栏： css JavaScript 文章标签： css javascript html

本文链接：https://blog.csdn.net/zhaoyang314/article/details/134111752

版权

css 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，效果如下：
请添加图片描述
单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。

一、html代码

<h1>学习计划</h1>	
	<div class="month">      
	  <ul>
	    <li class="prev"><上月</li>
	    <li class="next">下月></li>
	    <li style="text-align:center"><span id="monthbox">10月</span><br>
	      <span style="font-size:18px" id="yearbox">2023年</span>
	    </li>
	  </ul>
	</div>
	
	<ul class="weekdays">
	  <li>星期一</li>
	  <li>星期二</li>
	  <li>星期三</li>
	  <li>星期四</li>
	  <li>星期五</li>
	  <li>星期六</li>
	  <li>星期日</li>
	</ul>	
	<ul class="days"></ul>

这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。

二、CSS代码

* {box-sizing:border-box;}
		ul {list-style-type: none;}
		body {font-family: Verdana,sans-serif;}		
		.month {padding: 70px 25px;width: 100%;background: #1abc9c;}		
		.month ul {margin: 0;padding: 0;}		
		.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;}		
		.month .prev {float: left;padding-top: 10px;cursor: pointer;}		
		.month .next {float: right;padding-top: 10px;cursor: pointer;}		
		.weekdays {margin: 0;padding: 10px 0;background-color: #ddd;}		
		.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;}		
		.days {padding: 10px 0;background: #eee;margin: 0;}		
		.days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;}		
		.days li .active {padding: 5px;background: #1abc9c;color: white !important}		
		/* Add media queries for smaller screens */
		@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}		
		@media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}
		@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}

这段代码主要定义了日历的样式，一个主要的方法简述如下：

box-sizing：border-box;就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
@media screen and (max-width:720px) 。表示当浏览器的可视区域小于720px时候，执行。

三、Javascript代码

<script type="text/javascript">
	     var currentDate=new Date();
		function showDateList(){
			let year = currentDate.getFullYear();
			let month = currentDate.getMonth()+1;
			let date = currentDate.getDate();
			let firstWeekDay = new Date(year,month-1,1).getDay();
			let monthDays = new Date(year,month,0).getDate();
			let str="";
			let daylength = monthDays+firstWeekDay-1;
			let startDay = firstWeekDay-1
			if(firstWeekDay==0) {
				daylength =monthDays+6;
				startDay=6;
			}
			for (var i = 0; i <daylength ; i++) {
				if(i<startDay)
				{
					str +="<li></li>"
				}
				else
				{
					let today = new Date();
					let todate =(i-startDay+1);
					console.log(date)
					if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate())
					{
						str +="<li><span class='active'>"+todate+"</span></li>";
					}
					else{
						str +="<li>"+todate+"</li>";
					}					
				}
			}
			document.querySelector("#monthbox").innerHTML=month+"月";
			document.querySelector("#yearbox").innerHTML=year+"年";
			document.querySelector(".days").innerHTML=str;
		}
		showDateList();
		document.querySelector(".next").onclick= function(){
			currentDate.setMonth(currentDate.getMonth() + 1);
			showDateList();
		}
		document.querySelector(".prev").onclick= function(){
			currentDate.setMonth(currentDate.getMonth() - 1);
			showDateList();
		}
	</script>

此段代码实现了当月日历情况，单击上月、下月进行月份切换。
这样我们的日历就成型了，完整代码如下，请参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<style>
		* {box-sizing:border-box;}
		ul {list-style-type: none;}
		body {font-family: Verdana,sans-serif;}
		
		.month {padding: 70px 25px;width: 100%;background: #1abc9c;}		
		.month ul {margin: 0;padding: 0;}		
		.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;}		
		.month .prev {float: left;padding-top: 10px;cursor: pointer;}		
		.month .next {float: right;padding-top: 10px;cursor: pointer;}		
		.weekdays {margin: 0;padding: 10px 0;background-color: #ddd;}		
		.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;}		
		.days {padding: 10px 0;background: #eee;margin: 0;}		
		.days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;}		
		.days li .active {padding: 5px;background: #1abc9c;color: white !important}		
		/* Add media queries for smaller screens */
		@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}}		
		@media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}
		@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}
	</style>
    
</head>
<body>
	
	<h1>学习计划</h1>	
	<div class="month">      
	  <ul>
	    <li class="prev"><上月</li>
	    <li class="next">下月></li>
	    <li style="text-align:center"><span id="monthbox">10月</span><br>
	      <span style="font-size:18px" id="yearbox">2023年</span>
	    </li>
	  </ul>
	</div>
	
	<ul class="weekdays">
	  <li>星期一</li>
	  <li>星期二</li>
	  <li>星期三</li>
	  <li>星期四</li>
	  <li>星期五</li>
	  <li>星期六</li>
	  <li>星期日</li>
	</ul>	
	<ul class="days"></ul>	
	<script type="text/javascript">
	     var currentDate=new Date();
		function showDateList(){
			let year = currentDate.getFullYear();
			let month = currentDate.getMonth()+1;
			let date = currentDate.getDate();
			let firstWeekDay = new Date(year,month-1,1).getDay();
			let monthDays = new Date(year,month,0).getDate();
			let str="";
			let daylength = monthDays+firstWeekDay-1;
			let startDay = firstWeekDay-1
			if(firstWeekDay==0) {
				daylength =monthDays+6;
				startDay=6;
			}
			for (var i = 0; i <daylength ; i++) {
				if(i<startDay)
				{
					str +="<li></li>"
				}
				else
				{
					let today = new Date();
					let todate =(i-startDay+1);
					console.log(date)
					if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate())
					{
						str +="<li><span class='active'>"+todate+"</span></li>";
					}
					else{
						str +="<li>"+todate+"</li>";
					}
					
				}
			}
			document.querySelector("#monthbox").innerHTML=month+"月";
			document.querySelector("#yearbox").innerHTML=year+"年";
			document.querySelector(".days").innerHTML=str;
		}
		showDateList();
		document.querySelector(".next").onclick= function(){
			currentDate.setMonth(currentDate.getMonth() + 1);
			showDateList();
		}
		document.querySelector(".prev").onclick= function(){
			currentDate.setMonth(currentDate.getMonth() - 1);
			showDateList();
		}
	</script>	
</body>
</html>

游戏自学

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+Javascript+Html日历控件

最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。这段代码主要定义了日历的样式，一个主要的方法简述如下：此段代码实现了当月日历情况，单击上月、下月进行月份切换。
复制链接

扫一扫