htm+css+jquery实现日历小挂件

最新推荐文章于 2022-05-18 22:30:12 发布

晨曦之枭

最新推荐文章于 2022-05-18 22:30:12 发布

阅读量937

点赞数 1

本文链接：https://blog.csdn.net/zjz155/article/details/86487788

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

预备知识：

	1.
	一三五七八十腊，三一天永不差。四六九冬三十天，平年二月二十八。
	四年一闰,百年不闰,四百年再闰。(腊指十一月，冬指十二月)
	2.
	一月大二月小，三月大四月小，五月大六月小，七月大八月小，九月大十月小，
	十一月大十二月小。平年二月二十八。(月份大三十一天，月份小三十天)

实现效果：

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>calendar-日历</title>
	<script src="jquery-1.11.3.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#calendar{
			color:white;
			font-size: 10px;
			width: 150px;
			height: 135px;
			background-color: #0F375F;
			border: 1px transparent solid;
			margin-left: 20px;
			text-align: center;
		}
		#calendar-top{
			width: 150px;
    		height: 15px;
			font-weight: bold;
			text-align: center;
			border-bottom: 1px black solid;

		}
		#left-btn{
			float: left;
			margin-left:15px;			
			color: red;
			cursor:pointer;
		}
		#right-btn{
			float: right;
			margin-right: 15px;
			color: red;
			cursor:pointer;
		}
		#calendar-week,#calendar-day{
			padding-left: 15px;
		}
		#calendar-week>span,.day>span{
    		display: block;
    		float:left;
    		width: 15px;
    		height: 15px;
    		line-height: 15px;
    		border: 1px transparent solid;
    		text-align: center;	    		
    		/*border: 1px red solid;*/
    	}



    </style>
</head>
<body>
	<div id="calendar">
		<div id="calendar-top">
			<span id="left-btn">&lt</span>
			<span id="date"></span>
			<span id="right-btn">&gt</span>
		</div>
		<div id="calendar-week">			
			<span>日</span>
			<span>一</span>
			<span>二</span>
			<span>三</span>
			<span>四</span>
			<span>五</span>
			<span>六</span>				
		</div>
		<div id="calendar-day">
			<!-- <div class='day'>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
				<span>6</span>
				<span>7</span>	
			</div> -->
		</div>
	</div>
	<script type="text/javascript">
		/*
			一三五七八十腊，三一天永不差。
			四六九冬三十天，平年二月二十八。
			四年一闰,百年不闰,四百年再闰
		*/
		var leap_year_month_day = [31,29,31,30,31,30,31,31,30,31,30,31];
		var common_year_month_day = [31,28,31,30,31,30,31,31,30,31,30,31];		
		// 获取当前的日期对象
		var dt = new Date();
		var year = dt.getFullYear();
		var month = dt.getMonth() + 1;
		var day = dt.getDate();
		// 判断是否闰年
		function isLeapYear(year){
			if (year%4 ==0 && year%100 !=0 || year%400 ==0)
				return true;
			else
				return false;
		}
		
		// 返回某年某月1号是星期几
		function theMonthFirstDayWeek(year,month){		
			// Date对象，0对应1月，11对应12月	
			var dt = new Date(year,month-1,1);
			return dt.getDay()
		}
		
		// 计算某年某月月份的天数，如果月份小于0，那么说明计算的是下一年的12月份的天数。
		function theMonthTotalDay(year,month){	
			if(month-1 < 0){
				--year;
				month = 12
			}		
			var is_Leap_Year = isLeapYear(year);
			var total_day;
			if(is_Leap_Year){
				total_day = leap_year_month_day[month-1];
			}
			else{
				total_day = common_year_month_day[month-1];
			}
		
			return total_day;
		
		}
		
		// 显示日历
		function calendarDisplay(year,month){
			// 获得要显示的日期对象
			var the_day = new Date(year,month-1);
		
			// 清空日期
			$("#calendar-day").empty();		
			html ="";
			for(i=0;i<6;i++){
				html +=  "<div class='day'>";
				for(j=0;j<7;j++)
					html +="<span></span>";
				html +="</div>";
			}
			// 填充日期
			$("#calendar-day").append(html);
			console.log($("#calendar-day"))
			// 获得本月第一天是星期几
			var first_day_week = theMonthFirstDayWeek(year,month);
			// 获得本月一共有几天
			var month_total_day = theMonthTotalDay(year,month);
			// 获得今天是几号，在日历中的位置索引
			today_index = dt.getDate() + first_day_week -1;
			// 操作DOM元数显示日期
			$day_span = $(".day").children();
			console.log($day_span);
		
			pre_month_tab_number = first_day_week;
			next_month_tab_number = 42 - month_total_day - first_day_week;
			next_fill_index = month_total_day + first_day_week
			console.log(pre_month_tab_number);
			console.log(next_month_tab_number);
			var pre_month_day = theMonthTotalDay(year,month-1);
			console.log(pre_month_day);
			for(i=first_day_week -1;i>=0;i--){
				var node = document.createTextNode(pre_month_day);
				console.log(pre_month_day);
				$($day_span[i]).append(pre_month_day--).css({
					"color": "#708090",
					"background-color": "",
				});				
			}
		
			for(i=1;i<=month_total_day;i++){
				var node = document.createTextNode(i);
				$day_span[first_day_week].appendChild(node);	
				first_day_week++;
		
			}
		
			for(i=1;i<=next_month_tab_number;i++){
				var node = document.createTextNode(pre_month_day);
				console.log(pre_month_day);
				$($day_span[next_fill_index++]).append(i).css({
					"color": "#708090",
					"background-color": "",
				});				
			}
		
			// 如果日历显示的是当前月份，则标记当前日期
			if(the_day.getFullYear()===dt.getFullYear() && the_day.getMonth()===dt.getMonth()){	
				day = dt.getDate();				
				$($day_span[today_index]).css(
					{
						"background-color":"#14C8D4"
					}
				);
			}else{
				day = the_day.getDate();	
				console.log("the_day.getFullYear:" + the_day.getFullYear()+"#year"+year);
			}
		
			if(month<10){
					if(day<10)
						date = year + "/" +"0" + month + "/" + "0" + day;
					else
						date = year + "/" +"0" + month + "/" + day;
				}				
				else if(day<10)
					date = year + "/" + month + "/" + "0" + day;
				else
					date = year + "/" + month + "/" + day;
		
				$("#date").html(date);		
		
		}	
		
		// DOM加载完成后的操作
		$(function(){
			// 显示日历
			calendarDisplay(year,month);
			// 左按钮，日期减操作
			$("#left-btn").bind("click", function(){
				--month;
				if(month<=0){
					--year;
					month = 12
				}
		
				if(month<10)
					date = year + "/" +"0" + month + "/" + "01";
				else
					date = year + "/" + month + "/" + "01";
		
				$("#date").html(date);
		
				calendarDisplay(year,month);
			});
		
			// 右按钮，日期加操作
			$("#right-btn").bind("click", function(){
				++month;
				if(month>12){
					++year;
					month = 1;
				}
		
				if(month<10)
					date = year + "/" +"0" + month + "/" + "01";
				else
					date = year + "/" + month + "/" + "01";
		
		
				$("#date").html(date);
		
				calendarDisplay(year,month);
			});
		})		

	</script>

</body>
</html>