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

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

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

  • 现在对所给 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');
  • 先假定天数都为 31,经过 if 语句后,闰年二月份为 29 天,平年二月份为 28 天,四、六、九、十一月份为 30 天,则其余天数保持不变,为 31 天。

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

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

JavaScript Basics_Fundamentals Part 2_A simple calendar的更多相关文章

  1. JavaScript Basics_Fundamentals Part 1_Variables

    JavaScript Variables JavaScript 变量(Variables)是用于存储数据值的容器. 创建一个 JavaScript 变量,可以使用关键字 let. Example le ...

  2. JavaScript Basics_Fundamentals Part 1_Numbers

    Javascript Numbers 知识描述:JavaScript 只有一种数字类型,即数字(Number).数字可以带小数点,也可以不带,也就是整数和小数. 数字可以带小数点,也可以不带: Exa ...

  3. [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)

    Do you get lost when working with functions and the new keyword? Prototypal inheritance can be compl ...

  4. [引]雅虎日历控件 Example: Two-Pane Calendar with Custom Rendering and Multiple Selection

    本文转自:http://yuilibrary.com/yui/docs/calendar/calendar-multipane.html This example demonstrates how t ...

  5. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  6. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  7. 6 个JavaScript日期处理库

    1. Later.js Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurr ...

  8. 40 JavaScript Chart and Graph Libraries for Developers--reference

    reference:http://www.egrappler.com/javascript-chart-and-graph-libraries-for-developers/ BY TEAMEGRAP ...

  9. 近期在调用 calendar.js 的时候出现中文乱码! 解决方式

    近期写一个小项目的时候:在调用 calendar.js  的时候出现中文乱码! 如图所看到的: 原因在于: 我的jsp 页面,指定的是 UTF-8 编码,然而,调用的 calendar.js 的编码确 ...

随机推荐

  1. ILI9341液晶显示

    17.1液晶显示原理 TFT-LCD(Thin Film Transistor Liquid Crystal Display)即薄膜晶体管液晶显示器,是微电子技术与液晶显示器技术巧妙结合的的一种技术. ...

  2. 怎么理解linux作业(job),与进程(process)的关系

    1.相关概念: shell :命令解释器,其实就是一个脚本语言解释器,有很多种(bash,ash,tcsh等),最常用的是bash. job(作业): 是相对shell 来说的,在shell中执行一条 ...

  3. golang web框架设计6:上下文设计

    context,翻译为上下文,为什么要设计这个结构?就是把http的请求和响应,以及参数结合在一起,便于集中处理信息,以后框架的扩展等.好多框架比如gin,都是有这个上下文结构. context结构为 ...

  4. 知识点整理-网络IO知识总结

    UNIX 系统下的 I/O 模型有 5 种 同步阻塞 I/O.同步非阻塞 I/O.I/O 多路复用.信号驱动 I/O 和异步 I/O 什么是I/O 所谓的I/O 就是计算机内存与外部设备之间拷贝数据的 ...

  5. Flutter打包release版本安卓apk包真机安装无法请求网络的解决方法

    今天flutter build apk打包了一个release.apk包,在真机上安装后网络数据都不显示,但是在模拟器上没问题,然后又连接真机开debug各种测试,一切都正常!那这会是什么问题呢? 查 ...

  6. 在 Laravel 中使用 MongoDB

     可参考:https://blog.csdn.net/weixin_38682852/article/details/80840678 环境准备 安装 MongoDB 安装 PHP-MongoDB 扩 ...

  7. Vue面试题总结——目录

    首先致敬所有积极分享自己的学习经验的程序猿.本文及其链接的绝大部分文章均属各个网站上面排名靠前,条理清晰的文章.考虑到如果只放链接可能会存在失效导致无法访问的问题,对应的复制粘贴了这些文章过来.对每一 ...

  8. 公钥加密-DES-RSA

    公理 双方使用同一规则加密---------密钥(对称加密算法DES)data encryption standard 最大问题 双方一起制定--------办法:密钥交换算法,不用直接传递密钥--- ...

  9. 如何做一个项目v2.ppt

    链接:https://pan.baidu.com/s/159GQsYK9BcQad3h1CyVUYg 提取码:ivcj 复制这段内容后打开百度网盘手机App,操作更方便哦

  10. docker教程(1) - 快速使用

    docker 笔记(1) --docker安装.获取镜像.启动容器.删除容器 一.安装 Docker 官方文档 根据官方文档整理简单流程 从Docker Hub下载mac包 运行磁盘镜像,将Docke ...