0
我在使用此代碼時遇到問題。我正在嘗試建立一個日曆。這個HTML文件只是一堆帶有日期，月份和年份選擇器的div。當我點擊年份或日期（或選擇決定添加onClick屬性的月份）時，會在Javascript中調用buildCalendar（）函數。問題是我週日和週六有一些重複的值，所以日子不太合適。此外，請注意，有時會將價值觀放置在星期六專欄的右側（完全不包括在日曆中），我在最近幾天試圖弄清楚它並且讓我緊張起來的時候被困住了！在Javascript中顯示html和循環控制
另一個問題是，當我點擊生成日曆的日期時，日曆會生成但日期（和年份和月份）選擇器消失。我希望他們不要消失，以便我可以單擊不同的年份，月份或日期並使日曆動態更改。
這裏是CSS，HTML和Javascript代碼。我會做一個小提琴，但它不允許document.write（）和我使用該方法來建立日曆。
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = ".CSS/calendar.css">
<script type = "text/javascript" src = "./Calendar/calendar.js"></script>
<script type = "text/javascript" src = "task.js"></script>
</head>
<body onload = "setDate();">
<div id = "wrapper">
<div id="topleft">
<p><h2><script type="text/javascript"> var someMonth = document.getElementById("myMonth"); </script></h2>
<label for="myDay">Day: </label><input type="number" id="myDay" min="1" max="31" onclick="buildCalendar();"/>
<label for="myMonth">Month: </label><select id="myMonth" size="1" onClick = "buildCalendar";>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<label for="myYear">Year: </label><input type="number" id="myYear" min="1900" onClick = "buildCalendar();" />
</div>
<div id = "topRight"> Shows the form to add task </div>
<div id = "bottomRight"> Show list of tasks </div>
<div id = "bottomLeft" > Shows calendar </div>
<div id = "left"> Left Div </div>
<div id = "right"> Right Div </div>
</div>
</body>
</html>
的CSS代碼僅僅是用於定位和主要着色，但我想我並不需要擔心的是，直到日曆成功地生成，我可以看到的日期選擇器。
body{
background-color:black;
}
#wrapper {
size:950px;
margin: 0 auto;
background-color:green;
border-color:black;
}
#left {
size:50%
float:left;
background-color:yellow;
}
#right{
size:50%;
float:right;
background-color:red;
}
#bottomLeft{
background-color:red;
}
#topLeft{
float:left;
position:absolute;
z-index:100;
}
真正的問題可能在Javascript的某個地方。創建變量是爲了確定月份的第一個日期，最後日期，年份等。FOR語句遍歷從第一天開始到最後一天結束的月份，併爲每一天添加一個，結束在星期六的 這一行（至少這是它應該做的）。另外，我不明白爲什麼HTML中的日期選擇器沒有顯示出來。這是Javascript。
function setDate(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
document.getElementById("myDay").value = day;
document.getElementById("myMonth").value = month;
document.getElementById("myYear").value = year;
}
function buildCalendar(){
var firstDate = new Date(document.getElementById("myYear").value, document.getElementById("myMonth").value, 1);
var weekDay = firstDate.getDay();
var theDate = firstDate.getDate();
var theMonth = firstDate.getMonth();
var theYear = firstDate.getFullYear();
var newDay = new Date(theYear, theMonth + 1, 1);
var lastDate = new Date(newDay - 1);
var lastDay = lastDate.getDate();
var aMonth = document.getElementById("myMonth").selectedIndex.text;
document.write("<table class='caltable' border='1'><tr><th>");
document.write("<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th>");
document.write("</th></tr>");
var col = 0;
for (var i = 1-weekDay;i<=lastDay;i++)
{
if(col == 0 && weekDay != 6)
{
document.write("<td>" + i + "</td>");
col++;
}
//prevents the day from sliding to the right if the first of the month is a Saturday
if(col == 0 && weekDay == 6)
{
document.write("<tr><td>" + i + "</td></tr>");
col++;
}
if (col > 6)
{
document.write("<td>" + i + "</td></tr>");
col = 0;
}
else
{
document.write("<td>" + i + "</td>");
}
col++;
}
document.write("</table>");
}
/*function getMonthName()
{
var e = document.getElementById("myMonth").selectedIndex.value;
alert(e);
}*/