第一周学习日志

第一周

前端

本周学习了datepicker，通过学习慕课，做出了datepicker的基本效果。

使用知识点

1. 常用HTML元素；
2. 常见CSS样式 ；
3. 原生Javascript基础 ；
4. 浏览器事件 。

实现过程

静态结构编写
日历数据
数据渲染：使组件变成可以工作的组件
事件处理：处理鼠标点击事件

结构和样式

最终样式：

主体结构代码

header部分

class命名：ui-datepicker-wrapper 防止写代码时class命名出现冲突。

为按钮设置不同的名字，防止按钮独特的差异。

body部分

每个单元行代表一个星期，每个单元格代表一天。

核心数据（当月日历）

基础知识

渲染当月日历表格；
用于点击时获取日期值；
日期对象：new Date(year,month-1,date),特性：参数越界自动进退位；
getYear()：获得的数据代表当前年份距离1900年多久，因此获取年份使用getFullYear()；
getMonth()：获取真实月份减一的数值；
getDate()：获取当前日期是周几【1，2，3，4，5，6，0】；
当月第一天：new Date(year,month-1,1)；
当月最后一天：new Date(year,month,0)，例：对应一月零日，固倒回来代表12月31日。

代码

1. 需要一个方法获取一个月的数据：datepicker.getMonthData;
2. 定义数组ret[],获取当前返回结果；
3. if(firstDayWeekDay === 0 ) firstDayWeekDay = 7：将周天的值更改为7；
4. if(firstDayWeekDay === 0) firstDayWeekDay = 7：将周天的值更改为7;
5. 使用循环获取一个月的数据，获取当前具体哪一天；
6. 使用ret.push()将结果放在数组当中；
7. year = firstDay.getFullYear();
   month = firstDay.getMonth() + 1;
   使得取出的值不存在越界问题；
8. 为不变的包裹元素wrapper绑定事件以解决按钮每次销毁的问题；

区块链