【发布时间】：2014-11-08 13:58:41
【问题描述】：
我对此代码有疑问。我正在尝试建立一个日历。 HTML 文件只是一堆带有日期、月份和年份选择器的 div。当我单击年份或日期（或决定添加 onClick 属性时选择月份）时，会在 Javascript 中调用 buildCalendar() 函数。问题是我在周日和周六有一些重复的值，所以这些日子并不完全正确。此外，请注意有时会在星期六列的右侧（完全在日历之外）放置一个值，过去几天我一直在试图弄清楚它，这让我很紧张！
另一个问题是，当我单击日期构建日历时，日历会构建，但日期（以及年份和月份）选择器会消失。我希望它们不会消失，以便我可以单击不同的年份或月份或日期并动态更改日历。
这里是 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);
}*/
【问题讨论】：
标签： javascript html calendar