js/JQuery实现校历（万年历）
最近写了一个js小项目，实现校历（万年历）：
- js/jQuery
- 校历（万年历）
目录
用 [TOC]来生成目录：
html
首先写出前端的基本框架
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="css/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="index.js"></script>
<script>
</script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">月份</th>
<th scope="col">周数</th>
<th scope="col">一</th>
<th scope="col">二</th>
<th scope="col">三</th>
<th scope="col">四</th>
<th scope="col">五</th>
<th scope="col">六</th>
<th scope="col">日</th></tr>
</thead>
<tbody class="text-center">
</tbody>
</table>
</body>
</html>
js（jQuery）
js代码
$(function(){
var startTime = '2018-9-3 0:0:0';
var time = Date.parse(startTime);
time=new Date(time);
var week=new Array('一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十',
'二十一','二十二','二十三');
var note=[{
9:{10:"教师节",24:"中秋节"},
10:{1:"国庆节",18:"校庆日"},
1:{1:"元旦"}
}];
// console.log(note[0][9][10]);
var weekNum=0;
//生成表格
for(var j=0;j<24;j++){
var m=time.getMonth()+1;
var b=$("tbody")
b.append("<tr><th scope='row'>"+m+"</th></tr>");
$("tbody tr").last().append("<td><div>"+(week[weekNum])+"</div></td>")
for(var i=0;i<7;i++){
var flag=true;
//留空
if(time.getDate()==1){//判断日期是否为1，为1表示月份开始，，得到周几空出前方的格
var d=time.getDay();
d=(d+6)%7; //getDay()得到的周几加6对7取余得到月开始日期的位置
for(var k=0;k<d;k++){
$("tbody tr").last().append("<td><div>"+' '+"</div></td>");
i++;
}
}
var a=Date.parse(time);
a=new Date(a);
a.setDate(a.getDate()+1);
// console.log("a="+a);
var date=time.getDate();
$("tbody tr").last().append("<td><div>"+date+"</div></td>");
if(note[0][m]){
if(note[0][m][time.getDate()]){
// console.log(time.getDate());
$("tbody tr td").last().append("<div>"+note[0][m][time.getDate()]+"</div>");
}
}
time.setDate(time.getDate()+1);
if(a.getDate()==1){
flag=false;
break;
}
// console.log();
}
if(flag){weekNum++;}
}
上面的代码生成的表格左边每行都会有一个月份，用以下方法来解决这个问题，合并单元格
find();
//找到相同月份的区间
function find(){
var startRow,endRow;
var rows=$("tbody tr th").length;
// console.log(rows);
// console.log($("tbody tr th").eq(1).html());
for(var i=0;i<rows;i++){
// console.log($("tbody tr th").eq(1).html());
// console.log(i);
if($("tbody tr th").eq(i).html()==$("tbody tr th").eq(i+1).html()){
startRow=i;//开始节点
//循环找到最后一个相同的节点
for(var j=i;j<rows;j++){
if($("tbody tr th").eq(j).html()!=$("tbody tr th").eq(j+1).html()){
endRow=j;
// 执行合并方法
hebing(startRow,endRow);
break;
}
}
}else{
continue;
}
}
}
//合并单元格
function hebing(startRow,endRow){
var rows=endRow-startRow;
// console.log("startRow"+startRow);
// console.log("end:"+endRow);
// console.log(rows);
//先给除第一个外其他的节点加属性id
for(var i=startRow+1;i<=endRow;i++){
$("tbody tr th").eq(i).attr("id", i);
}
$("tbody tr th").eq(startRow).attr("rowspan", rows+1);//合并单元格
for(var i=startRow+1;i<=endRow;i++){
$("#"+i).remove();//按照上面的id属性删除节点
}
}
})
脚注
[1]1.
- 未删除测试用的console.log() 方便阅读和测试 ↩