Question

我正在尝试使用Javascript创建日历。问题是当buildCalendar（）方法将在星期日和星期一重复其值时。这是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();
    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 = theDate - weekDay; i <= lastDay; i++) {
        if (col == 0) {
            document.write("<tr><td>" + i + "</td>");
            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 = getElementById("myMonth").selectedIndex;
    var monthName = e.options[e.selectedIndex].text;
    return monthName;
}

HTML代码只是一堆包含日历和当前月份，日期和日期的div。如何将月份添加为Javascript创建的表格中的标题？更具体地说，我如何访问select标签中的选项值？

<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 = "./Calendar/task.js"></script>
    </head>
    <body onLoad = "setDate(); buildCalendar();">
        <div id = "wrapper">
        <div id = "left">  Left Div   </div>
        <div id = "right"> Right Div </div>
        <div id = "bottomLeft"> Shows calendar </div>
        <div id = "topLeft"> Day:<input id = "myDay" type="number" min = "1" max = "31">Month:<select id = "myMonth"><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 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> Year:<input id = "myYear" type = "number" min = "100"> TopLeft Div shows form components for date  </div>
        <div id = "topRight"> Shows the form to add task </div>
        <div id = "bottomRight"> Show list of tasks </div>
            </div>        
    </body>
</html>

Javascript控制流，访问HTML标签

0 个答案: