在 javascript / html 中创建日历
[英]creating a calendar in javascript / html
问题描述
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.因为我没有通过 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"> </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 个解决方案
解决方案1
1 2017-02-15 05:02:56
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: 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));
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: getLastDayofMonth函数应该在添加一个月之前将日期设置为该月的第一天（或 29 之前的任何日期），因为将 1 个月添加到 1 月 31 日返回 3 月 2 日或 3 日，因此您将获得 2 月的最后一天（和类似地，对于任何一个月，然后是天数较少的另一个月），所以：
/* 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 // ie 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.快乐的编码。 ;-) ;-)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.