2017-02-15 3 views
2

В настоящее время я пытаюсь создать календарь, который печатает дату сегоднясоздания календаря в 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>

+0

пост скрипка с вопросом –

+0

https://jsfiddle.net/wtb1s7bf/ – steven

+0

Не беспокойтесь о скрипке, код здесь работает. – RobG

ответ

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 января возвращает 2 или 3 марта, так что вы получите последний день F р а л ь (а так же за месяц, а затем еще один месяц меньше дней), так что:

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

Остальная часть вашего отсутствующего тела функции необходимо создать ячейки на каждый день, а затем заполнить их соответствующие значения. Счастливое кодирование. ;-)

Смежные вопросы