编写一个程序,提示用户输入年份和一年的第一天,然后通过构建HTML显示日历

时间:2017-02-23 03:25:57

标签: javascript html

我是JavaScript的新手(并且通常是编程新手)。如标题所述,此分配是通过用户提示获取年份和年中第一天的输入,并以HTML表格的形式构建日历。

我开始使用用Java编写的相同类型的问题的代码,并翻译它;但是,我无法得到任何东西返回浏览器。

我的桌子和额头目前都是血腥的,我真的很感激任何有关我正在做错误和/或失踪的帮助。

以下是我的js代码和html。:

    "use strict";
function getCalendar(year, day)
{
        var firstDayOfMonth;
        var result;

        //Find a number of the first day
        switch (day) 
        {
            case 0 : firstDayOfMonth = "Sunday"; break;
            case 1 : firstDayOfMonth = "Monday"; break;
            case 2 : firstDayOfMonth = "Tuesday"; break;
            case 3 : firstDayOfMonth = "Wednesday"; break;
            case 4 : firstDayOfMonth = "Thursday"; break;
            case 5 : firstDayOfMonth = "Friday"; break;
            case 6 : firstDayOfMonth = "Saturday"; break;
            default : result = "<p>Error: there is no such day of week</p>";
        }

        //Whether the year is a leap year
        function isLeapYear(year) 
        {
           return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
        }


        //Display the calendar
        for (var month = 1; month <= 12; month++) 
        {

            //Proper spacing between months
            if (firstDayOfMonth == 0)
                result += "<br />";
            else
                result += "<br /><br />");

            //Get name of the month
            var monthString = "";
            switch (month) 
            {
                case 1  : monthString = "January"; break;
                case 2  : monthString = "February"; break;
                case 3  : monthString = "March"; break;
                case 4  : monthString = "April"; break;
                case 5  : monthString = "May"; break;
                case 6  : monthString = "June"; break;
                case 7  : monthString = "July"; break;
                case 8  : monthString = "August"; break;
                case 9  : monthString = "September"; break;
                case 10 : monthString = "October"; break;
                case 11 : monthString = "November"; break;
                case 12 : monthString = "December"; break;
            }


            //Display the heading of the month  
            result += "<table border='1'><tr><th>" + " " + monthString + " " + year + "</th></tr><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";

            //Find the length of the month
            var length = 30 + ((month + (month / 8.0)) % 2);
            if (month == 2) //Adjust February length
                if (isLeapYear)
                    length -= 1; //Leap year
                else
                    length -= 2; //Non-leap year

            var counter = 1; //Counter to determine end of the week

            //Display blank space before first day
            for (var i = 0; i < firstDayOfMonth; i++) 
            {
                result += "<td>"  "</td>";
                counter++;
            }

            //Display days
            for (var day = 1; day <= length; day++) 
            {
                result += "<td>" + day + "</td>";
                result += (counter++ % 7 != 0) ? "  " : "<br />");
            }

            //Determine the first day of the next month
            firstDayOfMonth = (firstDayOfMonth + length) % 7;

        }
        result += "</table>";
    return result;
}

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Calendar</title>
<script language="JavaScript" type="text/javascript" src="getCalendar.js">
</script>
 </head>

  <body>
<script language="JavaScript" type="text/javascript">
var yearInt = parseInt(prompt("Enter year", 2016));
var dayInt = parseInt(prompt("Enter the first day of the year. 0 for Sunday, 1 for Monday, ..., and 6 for Saturday", 5));
document.writeln(getCalendar(yearInt, dayInt));

</script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

它们基本上是语法错误!

在这里错过了“” + “”

result += "<td>"  "</td>";

以下两行中的额外大括号 -

result += "<br /><br />)";
result += (counter++ % 7 != 0) ? "  " : "<br />)";

var yearInt = parseInt(prompt("Enter year", 2016));
var dayInt = parseInt(prompt("Enter the first day of the year. 0 for Sunday, 1 for Monday, ..., and 6 for Saturday", 5));
document.writeln(getCalendar(yearInt, dayInt));



  "use strict";
function getCalendar(year, day)
{
        var firstDayOfMonth;
        var result;

        //Find a number of the first day
        switch (day) 
        {
            case 0 : firstDayOfMonth = "Sunday"; break;
            case 1 : firstDayOfMonth = "Monday"; break;
            case 2 : firstDayOfMonth = "Tuesday"; break;
            case 3 : firstDayOfMonth = "Wednesday"; break;
            case 4 : firstDayOfMonth = "Thursday"; break;
            case 5 : firstDayOfMonth = "Friday"; break;
            case 6 : firstDayOfMonth = "Saturday"; break;
            default : result = "<p>Error: there is no such day of week</p>";
        }

        //Whether the year is a leap year
        function isLeapYear(year) 
        {
           return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
        }


        //Display the calendar
        for (var month = 1; month <= 12; month++) 
        {

            //Proper spacing between months
            if (firstDayOfMonth == 0)
                result += "<br />";
            else
                result += "<br /><br />";

            //Get name of the month
            var monthString = "";
            switch (month) 
            {
                case 1  : monthString = "January"; break;
                case 2  : monthString = "February"; break;
                case 3  : monthString = "March"; break;
                case 4  : monthString = "April"; break;
                case 5  : monthString = "May"; break;
                case 6  : monthString = "June"; break;
                case 7  : monthString = "July"; break;
                case 8  : monthString = "August"; break;
                case 9  : monthString = "September"; break;
                case 10 : monthString = "October"; break;
                case 11 : monthString = "November"; break;
                case 12 : monthString = "December"; break;
            }


            //Display the heading of the month  
            result += "<table border='1'><tr><th>" + " " + monthString + " " + year + "</th></tr><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";

            //Find the length of the month
            var length = 30 + ((month + (month / 8.0)) % 2);
            if (month == 2) //Adjust February length
                if (isLeapYear)
                    length -= 1; //Leap year
                else
                    length -= 2; //Non-leap year

            var counter = 1; //Counter to determine end of the week

            //Display blank space before first day
            for (var i = 0; i < firstDayOfMonth; i++) 
            {
                result += "<td>"  +"</td>";
                counter++;
            }

            //Display days
            for (var day = 1; day <= length; day++) 
            {
                result += "<td>" + day + "</td>";
                result += (counter++ % 7 != 0) ? "  " : "<br />";
            }

            //Determine the first day of the next month
            firstDayOfMonth = (firstDayOfMonth + length) % 7;

        }
        result += "</table>";
    return result;
}
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Calendar</title>
<script language="JavaScript" type="text/javascript" src="getCalendar.js">
</script>
 </head>

  <body>
  </body>
</html>

当您在javascript中出现错误时,请尝试使用控制台!

要打开专用的控制台面板,请执行以下操作:

  • 按Ctrl + Shift + J(Windows / Linux)或Cmd + Opt + J(Mac)。
  • 如果DevTools已经打开,请按“控制台”按钮。 当您打开控制台面板时,控制台抽屉会自动折叠。

JavaScript控制台为开发人员测试网页和应用程序提供了两个主要功能。这是一个地方:

  • 在开发过程中记录诊断信息。
  • 一个shell提示符,可用于与文档和DevTools进行交互。

希望它有所帮助!