您的位置: 首页  >  文章  >  校历（校历开始和结束时间，放假周期）

校历（校历开始和结束时间，放假周期）

分类: 文章 • 2025-02-28 17:58:23

前端初级菜鸟，因业务需求做了简易的校历，分享一下代码。

校历效果图

校历（校历开始和结束时间，放假周期）
可以自定义开始和结束时间，有蓝色背景色的是放假时间。自定义时间我是直接在js中修改的。
校历（校历开始和结束时间，放假周期）
下面是html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css1.css"/>
	</head>
	<body>
		<table border="1" cellspacing="0" style="text-align: center;">
			<tr>
				<td class="first" rowspan="4" style="width: 100px;">
					<span class="title1">学期</span>
					<span class="title2"><span class="span1">周</span><span class="span2">次</span></span>
					<span class="title3"><span class="span3">月</span><span class="span4">份</span></span>
					<span class="title4"><span class="span5">星期</span></span></td>
			</tr>
			<tr class="xueqi">
				
			</tr>
			<tr class="zhouci">
				
			</tr>
			<tr class="yuefen">
				
			</tr>
			<tr class="day1">
				//放这么多空格因为这样网页缩小时这个表格宽度不会缩小引起样式变化，简单粗暴的方法
				<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr class="day2">
				<td>二</td>
			</tr>
			<tr class="day3">
				<td>三</td>
			</tr>
			<tr class="day4">
				<td>四</td>
			</tr>
			<tr class="day5">
				<td>五</td>
			</tr>
			<tr class="day6">
				<td>六</td>
			</tr>
			<tr class="day7">
				<td>日</td>
			</tr>
		</table>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
	<script type="text/javascript" src="js/tablejs.js"></script>
</html>

需要引入jquery
下面是js代码：

$(function(){
	var StartYear=2018;//开始年份
	var StartMonth=9;//开始月份
	var StartDay=3;//开始日期
	var StartDate=1;//开始的星期几
	var EndYear=2018;//结束年份
	var EndMonth=8;//结束月份
	var EndDay=24;//结束日期
	var spaceMonth;//间隔几个月
	var zhouci=0;//周次
	//放假的起始时间
	var startYue=1;//假期开始月份
	var StartRi=1;//假期开始日期
	var EndYue=2;//假期结束月份
	var EndRi=23;//假期结束日期
	//有几个月份
	if((EndMonth-StartMonth)>=0){
		spaceMonth=EndMonth-StartMonth;
	}else{
		spaceMonth=12-StartMonth+EndMonth;
	}
	
	var month=StartMonth;
	var zjiedian=StartDate;
	var day=StartDay;
	var flag=true;
	var falg1;
	var flag2=true;
	var flag3=true;
	var flag4;
	var flag5=true;
	var flag6=0;
	var count=0;
	for(var i=0;i<=spaceMonth;i++){	
		//添加日期
		if(month==StartMonth){//如果是第一个月
			if(zjiedian>1&&zjiedian<=7){
				for( var n=1;n<zjiedian;n++){
					$("<td></td>").appendTo($(".day"+n)); 
				}
			}
			if(StartMonth==EndMonth){//如果第一个月和最后一个月为同一个月
				for(var j=day;j<=EndDay;j++){
					//判断日期是不是在放假日期范围内
					getHoliday(month,j);
					testFestival(month,j,zjiedian,falg6);
					zjiedian++;
					flag4=zjiedian;
					if(zjiedian>7){
						count+=1;
						zjiedian=1;
						$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
						zhouci++;
					}
				}
				if(flag5 && flag4<=7){
						count+=1;
						flag5=!flag5;
						$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
					}
			}else{
				for(var j=day;j<=getMonthDays(month,2018);j++){
					//判断日期是不是在放假日期范围内
					getHoliday(month,j);
					testFestival(month,j,zjiedian,flag6);
					zjiedian++;
					if(zjiedian>7){
						count+=1;
						zjiedian=1;
						$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
						zhouci++;
					}
				}
			}
			
		}else if(getChinese(month)==getChinese(EndMonth)){//最后一个月			
			for(var m=1;m<=EndDay;m++){
				//判断日期是不是在放假日期范围内
				getHoliday(month,m);
				testFestival(month,m,zjiedian,flag6);
				zjiedian++;
				falg1=zjiedian;
				if(zjiedian>7){
					count+=1;
					zjiedian=1;
					$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
					zhouci++;
				}
			}
			if(flag && falg1<=7){
				count+=1;
				flag=!flag;
				$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
			}
		}else{
			for(var k=1;k<=getMonthDays(month,2018);k++){
				//判断日期是不是在放假日期范围内
				getHoliday(month,k);
				testFestival(month,k,zjiedian,flag6);
				zjiedian++;
				if(zjiedian>7){
					count+=1;
					zjiedian=1;
					$("<td>"+zhouci+"</td>").appendTo($(".zhouci")); 
					zhouci++;
					if(flag3){
						if(zhouci>27){
							zhouci=0;
							flag3=!flag3;
						}
					}
					if(flag2){
						if(zhouci>22){
							zhouci=0;
							flag2=!flag2;
						}
					}
					
				}
			}
		}	
		$("<td colspan='"+count+"'>"+getChinese(month)+"月</td>").appendTo($(".yuefen")); 
		month++;	
		count=0;
	}
	$("<td colspan='23'>第一学期</td>").appendTo($(".xueqi")); 
	$("<td colspan='29'>第二学期</td>").appendTo($(".xueqi")); 

	
	
	function getChinese(monthNum){//把月份数字变为中文
		var ChineseNum;
		if(monthNum%12==1){
			ChineseNum=" 一";
		}else if(monthNum%12==2){
			ChineseNum="二";
		}else if(monthNum%12==3){
			ChineseNum="三";
		}else if(monthNum%12==4){
			ChineseNum="四";
		}else if(monthNum%12==5){
			ChineseNum="五";
		}else if(monthNum%12==6){
			ChineseNum="六";
		}else if(monthNum%12==7){
			ChineseNum="七";
		}else if(monthNum%12==8){
			ChineseNum="八";
		}else if(monthNum%12==9){
			ChineseNum="九";
		}else if(monthNum%12==10){
			ChineseNum="十";
		}else if(monthNum%12==11){
			ChineseNum="十一";
		}else if(monthNum%12==0){
			ChineseNum="十二";
		}
		return ChineseNum;
	}
	function getMonthDays(Month,year){//判断月份有几天
		var days=0;
		if(Month%12=="1"||Month%12=="3"||Month%12=="5"||Month%12=="7"||Month%12=="8"||Month%12=="10"||Month%12=="0"){
			days=31;
		}
		if(Month%12=="4"||Month%12=="6"||Month%12=="9"||Month%12=="11"){
			days=30;
		}
		if(Month%12=="2"){
			if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){//为闰年的时候
				days=29;
			}else{
				days=28;
			}
		}
		return days;
	}
	
	function testFestival(months,k,jd,colorflag){//月，日，节点
		if(colorflag==0){
				color="white";
			}else{
				color="#E0FFFF";
			}
		if(months%12==1 && k==1){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>元旦</td>").appendTo($(".day"+zjiedian)); 
		}else if(months%12==2 && k==5){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>春节</td>").appendTo($(".day"+zjiedian)); 
		}else if(months%12==4 && k==5){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>清明节</td>").appendTo($(".day"+zjiedian)); 
		}else if(months%12==5 && k==1){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>劳动节</td>").appendTo($(".day"+zjiedian)); 
		}else if(months%12==6 && k==7){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>端午节</td>").appendTo($(".day"+zjiedian)); 
		}else if(months%12==9 && k==24){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>中秋节</td>").appendTo($(".day"+zjiedian)); 
		}
		else if(months%12==10 && k==1){
			$("<td style='padding:2px;width:10px;color:red;background-color:"+color+"'>国庆节</td>").appendTo($(".day"+zjiedian)); 
		}else{
			
			$("<td style='padding:2px;height:50px;width:10px;background-color:"+color+"'>"+k+"</td>").appendTo($(".day"+zjiedian)); 
		}
	}
	
	//放假期间颜色表出来
	function getHoliday(yuefen,k){
		if(startYue==EndYue){//开始结束在一个月内
					if((yuefen%12==0?12:yuefen%12)==startYue){
						if(k>=StartRi && k<=EndRi){
							flag6=1;
						}else{
							flag6=0;
						}
					}else{
						flag6=0;
					}
				}else if(startYue<EndYue){//开始和结束不在一个月并且开始月小于结束月的
					if((yuefen%12==0?12:yuefen%12)>=startYue && (yuefen%12==0?12:yuefen%12)<=EndYue){//当前月在开始结束月之间
						if((yuefen%12==0?12:yuefen%12)==startYue && k>=StartRi){//开始月的日期
							flag6=1;
						}else if((yuefen%12==0?12:yuefen%12)>startYue && (yuefen%12==0?12:yuefen%12)<EndYue){
							flag6=1;
						}else if((yuefen%12==0?12:yuefen%12)==EndYue && k<=EndRi){
							flag6=1;
						}else{
							flag6=0;
						}
					}else{
						flag6=0;
					}
				}else if(startYue>EndYue){//开始月大于结束月的时候
					//先算开始月到12月，再算12月到结束月
					if((yuefen%12==0?12:yuefen%12)==startYue && k>=StartRi){
						flag6=1;
					}else if((yuefen%12==0?12:yuefen%12)>startYue || (yuefen%12==0?12:yuefen%12)<EndYue){
						flag6=1;
					}else if((yuefen%12==0?12:yuefen%12)==EndYue && k<=EndRi){
						flag6=1;
					}else{
						flag6=0;
					}
				}
	};
	
	
})

下面是css代码：

*{
	margin:0;
	padding: 0;
}
table{
	margin: 20px;
}
.first{
	width: 100px;
	height: 100px;
	position: relative;
}
.title1{
	position: absolute;
	top: 1px;
	left: 60px;
}
.span1{
	position: absolute;
	top: 22px;
	left: 60px;
}
.span2{
	position: absolute;
	top: 30px;
	left: 80px;
}
.span3{
	position: absolute;
	top: 45px;
	left: 65px;
}
.span4{
	position: absolute;
	top: 60px;
	left: 80px;
}
.span5{
	position: absolute;
	top: 70px;
	left: 30px;
}
td[class=first]:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 105px;
    top: 0;
    left: 0;
    background-color: #000;
    display: block;
    transform: rotate(-72deg);
    transform-origin: top;
    -ms-transform: rotate(-72deg);
    -ms-transform-origin: top;
}
span[class=title2]:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 121px;
    top: 0;
    left: 0;
    background-color: #000;
    display: block;
    transform: rotate(-57deg);
    transform-origin: top;
    -ms-transform: rotate(-57deg);
    -ms-transform-origin: top;
}
span[class=title3]:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 141px;
    top: 0;
    left: 0;
    background-color: #000;
    display: block;
    transform: rotate(-45deg);
    transform-origin: top;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: top;
}
.day5{
	border-bottom: 2px solid red;
}
.day6{
	border-top: 0;
}

相关推荐