用javascript / html创建日历

时间:2017-02-15 04:05:11

标签: javascript html

我目前正在尝试创建一个打印今天日期的日历

但是,我的日历仍为空白

当我尝试打印日历整个日历时

因为我不是通过HTML打印表格,所以我试图通过javascript打印表格。

var $ = function (id) { return document.getElementById(id); };


var getMonthText = function(currentMonth) {
    if (currentMonth === 0) { return "January"; }
    else if (currentMonth === 1) { return "February"; }
    else if (currentMonth === 2) { return "March"; }
    else if (currentMonth === 3) { return "April"; }
    else if (currentMonth === 4) { return "May"; }
    else if (currentMonth === 5) { return "June"; }
    else if (currentMonth === 6) { return "July"; }
    else if (currentMonth === 7) { return "August"; }
    else if (currentMonth === 8) { return "September"; }
    else if (currentMonth === 9) { return "October"; }
    else if (currentMonth === 10) { return "November"; }
    else if (currentMonth === 11) { return "December"; }
};

var getLastDayofMonth = function(currentMonth) {
    var dt = new Date();
    dt.setMonth(currentMonth +1);
    dt.setDate(0);
    
    return dt.getDate();
    
};

window.onload = function () {
    
    //var year =
    
};
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 360px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
    margin-bottom: .25em;
}
table {
    border-collapse: collapse;
    border: 1px solid black;
}
td {
    width: 3em;
    height: 3em;
    vertical-align: top;
    padding: 0.5 0 0 0.5;
    border: 1px solid black;
}
    <title>Calendar</title>
    <link rel="stylesheet" href="calendar.css">
    <script src="calendar.js"></script>

<body>
    <main>
        <h1><span id="month_year">&nbsp;</span></h1>

        <table id="calendar">
            <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
            
            
        </table>
    </main>
</body>

1 个答案:

答案 0 :(得分:1)

你需要在日历部分开始更多的开始,但这里有一些帮助。

getMonthText 函数更好地命名为 getMonthName ,可以简单如下:

/* Return month name
** @param {number|string} index - integer month number, zero indexed
** @returns {string} Full month name or undefined if index < 0 or > 11.
*/
function getMonthName(index) {
  return ['January','February','March','April','May','June','July',
          'August','September','October','November','December'][index];
}

var index = new Date().getMonth();

console.log(getMonthName(index));

getLastDayofMonth 函数应该在添加月份之前将日期设置为月份中的第一个月(或29之前的任何日期),因为从1月31日开始添加1个月会返回3月2日或3月,所以你我会得到二月的最后一天(类似于任何一个月,然后是另一个月更少的天),所以:

/* Return a date for the last day of the month of the provided date
** @param {Date} date - date to get last day of month for
** @returns {Date} date for last day of month
*/
function getLastDayOfMonth(date) {
  // Copy date so don't modify original, default to today
  var d = date? new Date(date) : new Date();
  // Set to start of month
  d.setDate(1);
  // Add a month and set to last day of previous
  // i.e. set to last day of current month
  d.setMonth(d.getMonth() + 1, 0);
  return d;
}

console.log(getLastDayOfMonth().toString());
console.log(getLastDayOfMonth(new Date(2016,1)).toString());

您缺少的函数体的其余部分需要为每天创建单元格,然后使用适当的值填充它们。快乐的编码。 ; - )