0
我想製作一個可以在幾個月之間使用JavaScript滾動的日曆。目前,日曆會顯示今天的日期並在其周圍建立月份。我有一個下一個按鈕,它改變了月份的標題,但日子完全沒有改變。我曾嘗試在'next'被調用時將"+ dayPerMonth[month+1] +"
插入日曆主體中,但無濟於事。它只是在桌子上方陳述下個月有多少天。可滾動的Javascript日曆
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ((year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
function displayCalendar(){
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ((year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;
}
function next(){
var calendarBody2 = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month++]+" "+ year +"</th></tr>";
calendarBody2 +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"
;
calendarBody2 += "<tr>";
calendarBody2 += htmlContent ;
calendarBody2 += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody2;
}
.btns{
width: 48%;
height: 5%;
}
#legend{
font-size: 20pt;
}
.ui-content{
margin-top: 1%;
}
.calendar{
width: 100%;
height: 80%;
}
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow{
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td{
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #FF0000;
color: #FFFFFF;
text-align: center;
}
<html>
<head>
<title>Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
\t \t \t \t \t
</html>
你我的朋友,是一個絕對的傳奇。 –
你在prev()函數中犯了一個小錯誤,你在那寫'if(month-1 == 0)',它應該是'if(month-1 == -1)'。除此之外,它是完美的。 –
感謝您指出,我錯誤地做到了。更新了答案。 –