时间戳

首页 > 解决方案 > 日历在正确的位置添加日期

javascript - 日历在正确的位置添加日期

问题描述

我在学校被分配了一个制作年历的任务，但它的间距不正确（第一个月结束的那一天应该是第二个月开始的那一天）。

我目前拥有的代码添加了 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>

标签： javascripthtmlcalendar

解决方案

它正在按照我现在想要的方式工作。每个人都感谢您的提示

代码：

<!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>

推荐阅读