js/JQuery实现校历(万年历)

js/JQuery实现校历(万年历)

最近写了一个js小项目,实现校历(万年历):
如有更好的方法还请多多指教
转载请注明出处

  • js/jQuery
  • 校历(万年历)

目录

  • js/JQuery实现校历(万年历)
    • 目录
      • 效果
      • html
      • js(jQuery)
    • 脚注


效果

js/JQuery实现校历(万年历)_第1张图片

html

首先写出前端的基本框架

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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(""+m+"");
        $("tbody tr").last().append("
"+(week[weekNum])+"
"
) 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"tbody tr").last().append("
"+' '+"
"
); 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("
"+date+"
"
); if(note[0][m]){ if(note[0][m][time.getDate()]){ // console.log(time.getDate()); $("tbody tr td").last().append("
"+note[0][m][time.getDate()]+"
"
); } } 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// 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;jif($("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.


  1. 未删除测试用的console.log() 方便阅读和测试 ↩

你可能感兴趣的:(前端)