【问题标题】:Calendar fills from the right side日历从右侧填充
【发布时间】:2017-07-23 16:31:38
【问题描述】:

我正在制作一个日历,现在我应该让每个月都从正确的一天开始(否则它们都会从星期日开始)。我制作了一个数组,其中包含在开始计算天数之前每个月我需要拥有的空数据单元的数量。我设法让它用适量的空数据单元格填充日历,但是,空数据单元格从右侧开始填充第一行,而逻辑上它应该从左侧开始。

我添加了一个screenshot 来展示它在我的电脑上的样子:

代码:

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

var maxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var spaces = [2, 5, 5, 1, 3, 6, 1, 4, 0, 2, 5, 0];
var weekDays = ["zo", "ma", "di", "wo", "do", "vr", "za"];
var kalender = 0;
var days = 1;
var weekDaysNumber = 0;
var empty = 1;



while(kalender < months.length){
    document.write("<div id='table'><table><tr class='jaarrij'>");
    document.write("<th colspan='7'>" + months[kalender] + "</th></tr>");
    document.write("<tr class='weekrij'>");

    while(weekDaysNumber <= 6){
        document.write("<td>" + weekDays[weekDaysNumber] + "</td>");
        weekDaysNumber++
    }
    document.write("</tr>");
    document.write("<tr class='rij'>");

    var rows = 1;

    while(days < maxDays[kalender]){

        if(spaces[kalender] >= 1) {
            document.write("<td class='dag'>" + " " + "</td");

            rows++;
            spaces[kalender]--;

        }

        else if(spaces[kalender] < 1){
            document.write("<td class='dag'>" + days + "</td>");



            rows++;
            days++;
        }





        if(rows == 7 && days !== maxDays[kalender]){
        document.write("</tr>");
        document.write("<tr class='rij'>");
        rows = 0;
        }

    }

    if(days == maxDays[kalender]){
            document.write("</tr></table></div>");
            kalender++;
            weekDaysNumber=0;
            days= 1;

        }
}

【问题讨论】:

  • 您已经硬编码了一个月中的天数和所需的空格数,因此除非您不希望它在您将被卡住的任何日期都起作用。我将 getDay() 用于给定的日期,该日期根据星期几返回 1-7。您可以使用它来添加空格。 “if(spaces[kalender]
  • 您好,谢谢您的帮助。我是新手,但我认为this 应该可以工作。编辑:它只在我按下运行时才对我有用,否则它会永远加载。由于某种原因,css 也没有初始化。

标签: javascript loops calendar html-table


【解决方案1】:

不知道我是怎么错过的,但是您还没有关闭添加空白日期的行的标签..

你可以简单地使用

<td class='dag'></td>

太而不是+" "+

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-25
    • 2019-03-25
    • 2018-10-18
    • 1970-01-01
    • 2018-09-01
    • 1970-01-01
    相关资源
    最近更新 更多