JavaScript Basics_Fundamentals Part 2_A simple calendar_莺语_前端开发者

  • 下方的日历框架是从 Active learning: A simple calendar 上整过来的。

  • 主要任务是用 if...else 语句来让日历本显示出每月相对应的天数,相关代码已经给出,我们只需要补充 // ADD CONDITIONAL HERE 下欠缺的代码即可。

  • 下方的日历框架是从 Active learning: A simple calendar 上整过来的。

  • 下方的日历框架是从 Active learning: A simple calendar 上整过来的。

    Active learning: A simple calendar

  • 主要任务是用 if...else 语句来让日历本显示出每月相对应的天数,相关代码已经给出,我们只需要补充 // ADD CONDITIONAL HERE 下欠缺的代码即可。

  • 主要任务是用 if...else 语句来让日历本显示出每月相对应的天数,相关代码已经给出,我们只需要补充 // ADD CONDITIONAL HERE 下欠缺的代码即可。

    if...else// ADD CONDITIONAL HERE

    • 点击上方的「Reset」按钮可以重置代码,点击「Show solution」按钮可以显示答案,然后我们点击日历上边的「Select month」来选择月份,可以看到日历上对应的月份的天数发生了变化。

    • 现在对所给 solution 做些修改,判断今年是闰年还是平年,设置对应的二月份的天数。

  • 点击上方的「Reset」按钮可以重置代码,点击「Show solution」按钮可以显示答案,然后我们点击日历上边的「Select month」来选择月份,可以看到日历上对应的月份的天数发生了变化。

  • 点击上方的「Reset」按钮可以重置代码,点击「Show solution」按钮可以显示答案,然后我们点击日历上边的「Select month」来选择月份,可以看到日历上对应的月份的天数发生了变化。

  • 现在对所给 solution 做些修改,判断今年是闰年还是平年,设置对应的二月份的天数。

  • 现在对所给 solution 做些修改,判断今年是闰年还是平年,设置对应的二月份的天数。

    var select = document.querySelector('select');
    var list = document.querySelector('ul');
    var h1 = document.querySelector('h1');
    
    select.onchange = function() {
        var choice = select.value;
        let days = 31;
        let myDate = new Date();               // 创建 Date 对象
        let year = myDate.getFullYear();    // 获取当前年份
        // ADD CONDITIONAL HERE
        // 闰年
        if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            if(choice === 'February') {
                days = 29;
            }
            else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
                days = 30;
            }
        }
        // 平年
        else {
            if(choice == 'February') {
                days = 28;
            }
            else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
                days = 30;
            }
        }
      
        createCalendar(days, choice);
      }
    
      function createCalendar(days, choice) {
        list.innerHTML = '';
        h1.textContent = choice;
        for(var i = 1; i <= days; i++) {
        var listItem = document.createElement('li');
        listItem.textContent = i;
        list.appendChild(listItem);
        }
        }
       
       createCalendar(31,'January');
    

    var select = document.querySelector('select');
    var list = document.querySelector('ul');
    var h1 = document.querySelector('h1');

    select.onchange = function() {
    var choice = select.value;
    let days = 31;
    let myDate = new Date(); // 创建 Date 对象
    let year = myDate.getFullYear(); // 获取当前年份
    // ADD CONDITIONAL HERE
    // 闰年
    if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    if(choice === 'February') {
    days = 29;
    }
    else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
    days = 30;
    }
    }
    // 平年
    else {
    if(choice == 'February') {
    days = 28;
    }
    else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
    days = 30;
    }
    }

    createCalendar(days, choice);
    }

    function createCalendar(days, choice) {
    list.innerHTML = '';
    h1.textContent = choice;
    for(var i = 1; i <= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
    }
    }

    createCalendar(31,'January');

    • 先假定天数都为 31,经过 if 语句后,闰年二月份为 29 天,平年二月份为 28 天,四、六、九、十一月份为 30 天,则其余天数保持不变,为 31 天。

    • ===:称为等同符,当两边值的类型相同时,直接比较值;若类型不相同,直接返回 false。

    • ==:称为等值符,当等号两边的类型相同时,直接比较值是否相等;若不相同,则先转化为类型相同的值,再进行比较。

  • 先假定天数都为 31,经过 if 语句后,闰年二月份为 29 天,平年二月份为 28 天,四、六、九、十一月份为 30 天,则其余天数保持不变,为 31 天。

  • 先假定天数都为 31,经过 if 语句后,闰年二月份为 29 天,平年二月份为 28 天,四、六、九、十一月份为 30 天,则其余天数保持不变,为 31 天。

  • ===:称为等同符,当两边值的类型相同时,直接比较值;若类型不相同,直接返回 false。

  • ===:称为等同符,当两边值的类型相同时,直接比较值;若类型不相同,直接返回 false。

    ===

  • ==:称为等值符,当等号两边的类型相同时,直接比较值是否相等;若不相同,则先转化为类型相同的值,再进行比较。

  • ==:称为等值符,当等号两边的类型相同时,直接比较值是否相等;若不相同,则先转化为类型相同的值,再进行比较。

    ==

    » 本文来自:前端开发者 » 《JavaScript Basics_Fundamentals Part 2_A simple calendar_莺语_前端开发者》
    » 本文链接地址:https://www.rokub.com/73735.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!