JavaScript Basics_Fundamentals Part 2_A simple calendar
下方的日历框架是从 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的更多相关文章
- JavaScript Basics_Fundamentals Part 1_Variables
JavaScript Variables JavaScript 变量(Variables)是用于存储数据值的容器. 创建一个 JavaScript 变量,可以使用关键字 let. Example le ...
- JavaScript Basics_Fundamentals Part 1_Numbers
Javascript Numbers 知识描述:JavaScript 只有一种数字类型,即数字(Number).数字可以带小数点,也可以不带,也就是整数和小数. 数字可以带小数点,也可以不带: Exa ...
- [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 ...
- [引]雅虎日历控件 Example: Two-Pane Calendar with Custom Rendering and Multiple Selection
本文转自:http://yuilibrary.com/yui/docs/calendar/calendar-multipane.html This example demonstrates how t ...
- 最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
- javascript日历控件——纯javascript版
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...
- 6 个JavaScript日期处理库
1. Later.js Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurr ...
- 40 JavaScript Chart and Graph Libraries for Developers--reference
reference:http://www.egrappler.com/javascript-chart-and-graph-libraries-for-developers/ BY TEAMEGRAP ...
- 近期在调用 calendar.js 的时候出现中文乱码! 解决方式
近期写一个小项目的时候:在调用 calendar.js 的时候出现中文乱码! 如图所看到的: 原因在于: 我的jsp 页面,指定的是 UTF-8 编码,然而,调用的 calendar.js 的编码确 ...
随机推荐
- git 优雅的撤销中间某次提交
环境git : 2+ 前言最近两天,公司的git合并代码时,出现了严重的问题,浪费很多时间: 现在记录下: 情况是这样的,一个同事自己的本地分支(远程没有),不知怎么的,有了别人开发分支的代码,而他自 ...
- Vue生命周期钩子函数加载顺序的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- SQL-W3School-基础:SQL WHERE 语句
ylbtech-SQL-W3School-基础:SQL WHERE 语句 1.返回顶部 1. WHERE 子句用于规定选择的标准. WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句 ...
- Spring Boot中报错org.apache.ibatis.binding.BindingException: Parameter 'XXXX' not found. Available parameters are [0, 1, param1, param2]的解决办法
我这里的报错信息显示: org.apache.ibatis.binding.BindingException: Parameter 'reqUsername' not found. Available ...
- 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题
参考如下: https://www.ucloud.cn/yun/114228.html
- php代码调试的重要性
从去年开始做PHP,基本上有的集成环境用了一个遍,XAMPP,WAMP,phpStudy.都是部署一个环境,就在环境下的默认访问目录去创建项目运行.用PHPStorm一直没能在本地做过什么调试.要么不 ...
- Centos6.5搭建方法
# VSFTP # ## ###安装 vsftp yum install vsftpd* -y ###启动服务 /etc/init.d/vsftpd restart ###配置 ...
- go module配置
参考文章: http://c.biancheng.net/view/4774.html 1.
- spring boot工程如何启用 热启动功能
1.在pom.xml里面添加一个依赖即可 关键代码 <dependency> <groupId>org.springframework.boot</groupId> ...
- @ControllerAdvice和@ExceptionHandler
1. 使用 @ControllerAdvice和@ExceptionHandler处理全局异常 1. 新建异常信息实体类 非必要的类,主要用于包装异常信息. package com.test.exce ...