日历将日期添加到正确的位置

时间：2018-12-11 16:09:41

标签： javascript html calendar

我已经在学校分配了一个做年历的作业，但是它不能正确放置（第一个月结束的那一天应该是第二个月开始的那一天）。

我当前拥有的代码添加了12个日历，这些日历的天数正确。

问题摘要：

  1. 第1个月在星期五结束，然后第2个月在星期六开始。
  2. 欢迎任何提示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPDRACHT 13
  </title>
  <style>
    .table{
      display:table;
      margin:15px;
      font-size: 30px;
    }
    .row{
      width:1500px;
        display: table-row;
      font-size: 16px;
    }
    .cell{
      font-size: 16px;
      width:150px;
      height:50px;
      border:1px solid black;
      display:table-cell;}
      .row:first-of-type{font-weight: bold;}
  </style>
</head>
<body>

  <div class="cntain" id="cntain"></div>


  <script>
  run = 0;
  months = [
    ["januarie",31],["februarie",28],["maart",31],
    ["april",30],["mei",31],["juni",30],
    ["juli",31],["augustus",31],["september",30],
    ["oktober",31],["november",30],["december",31]];
  weekdagen = ["maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag","zondag"]
  nu = new Date();
  int_d = new Date(nu.getFullYear(), nu.getMonth()+1,1);
  d = new Date(int_d - 1);

  var lastday=0;

  function maketable(month){

  table = document.createElement("div");
  table.className = "table"
  table.setAttribute("id", months[month][0]);
  titl = document.createTextNode(months[month][0]);
  table.appendChild(titl);
  document.getElementById("cntain").appendChild(table);
  y = 0
  u = 0
  for (x=0;x<7;x++){
    rows = document.createElement("div");
    rows.className = "row"
    rows.setAttribute("id", months[month][0]+x);
    document.getElementById(months[month][0]).appendChild(rows);
  }
  let start = x+lastday;
  let day =1;
  x=0
    for (x=0;x<49;x++){
      xy = Math.floor(x/7)
      //console.log(xy)
      weekday = weekdagen[x]

      dag = document.createElement("div");
      wkday = document.createTextNode(weekday);
      if(x < 7){dag.appendChild(wkday)}



      if (x > 6 && x < (months[month][1]+start) && start <= x){
        yeh = document.createTextNode((x-6));
        dag.appendChild(yeh);}
      else{
        nope = document.createTextNode(" ");
        dag.appendChild(nope);
      }
      dag.className = "cell dag"+(x-11);
      if (xy < 7){
      //console.log(xy)
      document.getElementById(months[month][0]+xy).appendChild(dag);}
      else{break;}
    }
    lastday = months[month][1]%7;
  run++
  var hvy = parseInt(months[month][1]);
  console.log(hvy-7)








}
maketable(0);
maketable(1);
maketable(2);
maketable(3);
maketable(4);
maketable(5);
maketable(6);
maketable(7);
maketable(8);
maketable(9);
maketable(10);
maketable(11);

  </script>



</body>
</html>

3 个答案:

答案 0 :(得分：0)

尝试一下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPDRACHT 13
  </title>
  <style>
    .table{
      display:table;
      margin:15px;
    }
    .row{
      width:1500px;
        display: table-row;
    }
    .cell{
      width:150px;
      height:50px;
      border:1px solid black;
      display:table-cell;}
      .row:first-of-type{font-weight: bold;}
  </style>
</head>
<body>

  <div class="cntain" id="cntain"></div>


  <script>
  run = 0;
  months = [
    ["januarie",31],["februarie",28],["maart",31],
    ["april",30],["mei",31],["juni",30],
    ["juli",31],["augustus",31],["september",30],
    ["oktober",31],["november",30],["december",31]];
  weekdagen = ["maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag","zondag"]
  nu = new Date();
  int_d = new Date(nu.getFullYear(), nu.getMonth()+1,1);
  d = new Date(int_d - 1);


var lastday=0;

  function maketable(month){

  table = document.createElement("div");
  table.className = "table"
  table.setAttribute("id", months[month][0]);

  document.getElementById("cntain").appendChild(table);
  y = 0
  u = 0
  for (x=0;x<7;x++){
    rows = document.createElement("div");
    rows.className = "row"
    rows.setAttribute("id", months[month][0]+x);
    document.getElementById(months[month][0]).appendChild(rows);
  }
    let start = x+lastday;
    let day =1;
    for (x=0;x<50;x++){
      xy = Math.floor(x/7)
      weekday = weekdagen[x]

      dag = document.createElement("div");
      wkday = document.createTextNode(weekday);
      if(x < 7){dag.appendChild(wkday)}

      if (x > 6 && x < months[month][1] && x >= start){
        yeh = document.createTextNode((day));
        day++;
        dag.appendChild(yeh);
      }
      else{
        nope = document.createTextNode(" ");
        dag.appendChild(nope);
      }

      //if((x-6)>last) last = x-6;

      dag.className = "cell dag"+(x-11);
      if (xy < 7){
      //console.log(xy)
      document.getElementById(months[month][0]+xy).appendChild(dag);}
      else{break;}
    }
    lastday = months[month][1]%7;
  run++
}
maketable(0);
maketable(1);
maketable(2);
maketable(3);

  </script>



</body>
</html>

基本上可以记住上个月的最后一天，并为该计数添加空的div。还可以使用新变量作为日期，从1开始。

答案 1 :(得分：0)

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPDRACHT 13
  </title>
  <style>
    .table{
      display:table;
      margin:15px;
      font-size: 30px;
    }
    .row{
      width:1500px;
        display: table-row;
      font-size: 16px;
    }
    .cell{
      font-size: 16px;
      width:150px;
      height:50px;
      text-align: center;
      line-height: 50px;
      border:1px solid black;
      display:table-cell;}
      .row:first-of-type{font-weight: bold;}
    .dag1{background-color: lightgrey;}
  </style>
</head>
<body>

  <div class="cntain" id="cntain"></div>


  <script>
  run = 0;
  months = [
    ["januarie",new Date(2019, 1, 0).getDate()],
    ["februarie",new Date(2019, 2, 0).getDate()],
    ["maart",new Date(2019, 3, 0).getDate()],
    ["april",new Date(2019, 4, 0).getDate()],
    ["mei",new Date(2019, 5, 0).getDate()],
    ["juni",new Date(2019, 6, 0).getDate()],
    ["juli",new Date(2019, 7, 0).getDate()],
    ["augustus",new Date(2019, 8, 0).getDate()],
    ["september",new Date(2019, 9, 0).getDate()],
    ["oktober",new Date(2019, 10, 0).getDate()],
    ["november",new Date(2019, 11, 0).getDate()],
    ["december",new Date(2019, 12, 0).getDate()]];
  weekdagen = ["maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag","zondag"]
  nu = new Date();
  int_d = new Date(nu.getFullYear(), nu.getMonth()+1,1);
  d = new Date(int_d - 1);

  var lastday=0;

  function maketable(month){

  table = document.createElement("div");
  table.className = "table"
  table.setAttribute("id", months[month][0]);
  titl = document.createTextNode(months[month][0]);
  table.appendChild(titl);
  document.getElementById("cntain").appendChild(table);
  y = 0
  u = 0
  for (x=0;x<7;x++){
    rows = document.createElement("div");
    rows.className = "row"
    rows.setAttribute("id", months[month][0]+x);
    document.getElementById(months[month][0]).appendChild(rows);
  }

  let start = x+lastday; console.log(lastday);
  let day =1;
  //x=0
    for (x=0;x<49;x++){
      xy = Math.floor(x/7)
      //console.log(xy)
      weekday = weekdagen[x]

      dag = document.createElement("div");
      wkday = document.createTextNode(weekday);
      if(x < 7){dag.appendChild(wkday)}

      if(x < start){
        nope = document.createTextNode(" ");
        dag.appendChild(nope);
      }
      else if (x > (start-1) && x < (months[month][1]+(start))){
        yeh = document.createTextNode(day);
        day++;
        dag.appendChild(yeh);
      }
      else{
        nope = document.createTextNode(" ");
        dag.appendChild(nope);
      }
      dag.className = "cell dag"+(x-(start-1));
      if (xy < 7){
      //console.log(xy)
      document.getElementById(months[month][0]+xy).appendChild(dag);}
      else{break;}
    }
    lastday = (months[month][1]+start)%7; 
  run++
}
maketable(0);
maketable(1);
maketable(2);
maketable(3);
maketable(4);
maketable(5);
maketable(6);
maketable(7);
maketable(8);
maketable(9);
maketable(10);
maketable(11);

  </script>



</body>
</html>

答案 2 :(得分：0)

它正在按照我现在想要的方式工作。 大家谢谢你的提示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPDRACHT 13
  </title>
  <style>
    .table{
      display:table;
      margin:15px;
      font-size: 30px;
    }
    .row{
      width:1500px;
        display: table-row;
      font-size: 16px;
    }
    .cell{
      font-size: 16px;
      width:150px;
      height:50px;
      text-align: center;
      line-height: 50px;
      border:1px solid black;
      display:table-cell;}
      .row:first-of-type{font-weight: bold;}
    .dag1{background-color: lightgrey;}
    h1{font-size: 45px;margin-left: 400px;}
  </style>
</head>
<body>
  <h1 id="caltitle"></h1>
  <div class="cntain" id="cntain"></div>


  <script>
  run = 0;

  weekdagen = ["maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag","zondag"]
  nu = new Date();
  int_d = new Date(nu.getFullYear(), nu.getMonth()+1,1);
  d = new Date(int_d - 1);

  var lastday=0;
  year = prompt('jaar')
  document.getElementById("caltitle").innerHTML = year+" calender"
  function maketable(month){


    months = [
      ["januari",new Date(year, 1, 0)],
      ["februari",new Date(year, 2, 0)],
      ["maart",new Date(year, 3, 0)],
      ["april",new Date(year, 4, 0)],
      ["mei",new Date(year, 5, 0)],
      ["juni",new Date(year, 6, 0)],
      ["juli",new Date(year, 7, 0)],
      ["augustus",new Date(year, 8, 0)],
      ["september",new Date(year, 9, 0)],
      ["oktober",new Date(year, 10, 0)],
      ["november",new Date(year, 11, 0)],
      ["december",new Date(year, 12, 0)],
      ["start",new Date(year-1, 12, 0)]];

  table = document.createElement("div");
  table.className = "table"
  table.setAttribute("id", months[month][0]);
  titl = document.createTextNode(months[month][0]);
  table.appendChild(titl);
  document.getElementById("cntain").appendChild(table);
  y = 0
  u = 0
  for (x=0;x<7;x++){
    rows = document.createElement("div");
    rows.className = "row"
    rows.setAttribute("id", months[month][0]+x);
    document.getElementById(months[month][0]).appendChild(rows);
  }


  if (run == 0){
    lastday = months[12][1].getDay();
  }
  let start = x+lastday;
  let day =1;
  x=0
    //console.log(run)



    if(start >= 14){start=start-7}
    if(start < 7){start=start+7}



    for (x=0;x<60;x++){
      xy = Math.floor(x/7);
      weekday = weekdagen[x]
      dag = document.createElement("div");
      wkday = document.createTextNode(weekday);
      if(x < 7){dag.appendChild(wkday)}

      if (x > (start-1) && x < (months[month][1].getDate()+(start))){
        //console.log(months[month][0]+" "+months[month][1].getDate() +" "+start)
        yeh = document.createTextNode((x-start+1));
        dag.appendChild(yeh);}
      else{
        nope = document.createTextNode(" ");
        dag.appendChild(nope);
      }
      dag.className = "cell dag"+(x-(start-1));
      if (xy < 7){
      //console.log(xy)
      document.getElementById(months[month][0]+xy).appendChild(dag);}
      else{break;}
    }
    lastday = months[month][1].getDay();
    console.log(months[month][1]+" "+lastday);
  run++








}
maketable(0);
maketable(1);
maketable(2);
maketable(3);
maketable(4);
maketable(5);
maketable(6);
maketable(7);
maketable(8);
maketable(9);
maketable(10);
maketable(11);
  </script>



</body>
</html>
相关问题
最新问题