在javascript / html中创建一个日历 [英] creating a calendar in javascript / html

问题描述

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

但是，我的日历仍然是空白的

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

由于我不是通过HTML打印表格，我试图通过javascript打印表格。

var $ = function（id）{return document.getElementById（id ）; }; var getMonthText = function（currentMonth）{if（currentMonth === 0）{returnJanuary; } else if（currentMonth === 1）{returnFebruary; } else if（currentMonth === 2）{returnMarch; } else if（currentMonth === 3）{returnApril; } else if（currentMonth === 4）{returnMay; } else if（currentMonth === 5）{returnJune; } else if（currentMonth === 6）{returnJuly; } else if（currentMonth === 7）{returnAugust; } else if（currentMonth === 8）{returnSeptember; } else if（currentMonth === 9）{returnOctober; } else if（currentMonth === 10）{returnNovember; } else if（currentMonth === 11）{returnDecember; }}; var getLastDayofMonth = function（currentMonth）{var dt = new Date（）; dt.setMonth（currentMonth +1）; dt.setDate（0）;返回dt.getDate（）; }; window.onload = function（）{// var year =};

  body {font-family：Arial，Helvetica，sans-serif;背景颜色：白色;保证金：0汽车;宽度：360px;边框：3px纯蓝色; padding：0 2em 1em;} h1 {color：blue; margin-bottom：.25em;} table {border-collapse：collapse; border：1px纯黑色;} td {width：3em;身高：3em; vertical-align：top;填充：0.5 0 0 0.5; border：1px solid black;}  

< title>日历< ; /标题> < link rel =stylesheethref =calendar.css> < script src =calendar.js>< / script>< body> <主> < h1>< span id =month_year>& nbsp;< / span>< / h1> < table id =calendar> < TR><的第i;周日及LT; /第><的第i;星期一及LT; /第><的第i;星期二< /第><的第i;三及LT; /第><的第i;星期四< /第><的第i;周五< /第><的第i;周六及LT; /第>< / TR> < /表> < / main>< / body>

解决方案

getMonthText

/ em>函数会更好地命名为 getMonthName ，并且可以很简单：

  / *返回月份名称** @param {number | string}索引 - 整数月份数字，零索引** @returns {字符串}完整月份名称或未定义索引< 0或> 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 函数应该将日期设置为月份的第一个月）之前添加一个月，因为1月31日增加1月31日返回2月3日，所以你会得到2月的最后一天（和任何月份相似，接着是另一个月更少的天），所以：

> / *返回所提供日期的月份最后一天的日期** @ param {Date} date - 获取最后一个da的@returns {Date}日期的月份的最后一天的日期月的y * / function getLastDayOfMonth（date）{//复制日期，所以不要修改原始的，默认为今天var d = date？新日期（日期）：新日期（）; //设置为月份开始d.setDate（1）; //添加一个月并设置为前一天//即设置为当月的最后一天d.setMonth（d.getMonth（）+ 1,0）;返回d;} console.log（getLastDayOfMonth（）。toString（））; console.log（getLastDayOfMonth（new Date（2016,1））。toString（））;

剩余的函数体需要为每一天创建单元格，然后填充适当的值。快乐的编码。 ; - ）

I'm currently trying to create a calendar that prints the date of today

However, my calendar is still blank

with when I try to print the calendar whole calendar

Because I'm not printing tables through HTML, I was trying to print the table through javascript instead.

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>

解决方案

You need to make more of a start on the calendar part, but here's some help with what you have.

The getMonthText function would be better named getMonthName and can be as simple as:

/* 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));

The getLastDayofMonth function should set the date to the first of the month (or any date before 29) before adding a month, since adding 1 month to 31 January returns 2 or 3 March, so you'll get the last day of February (and similarly for any month followed by another month of fewer days), so:

/* 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());

The rest of your missing function body needs to create cells for each day, then fill them with appropriate values. Happy coding. ;-)

这篇关于在javascript / html中创建一个日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！