HTML5+CSS3+JavaScript Web前端开发案例教程课件：工作任务单.pptxVIP

工作任务单

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：网页版工作任务单核心功能：周日历展示今日签到日历进度控制添加工作任务单任务状态管理

案例介绍周日历展示效果：

案例介绍今日签到效果：

案例介绍添加工作任务单效果：

案例介绍任务单状态管理效果：

02技术准备

技术准备技术1：Moment.js日期处理类库Moment.js是一个简单易用的轻量级JavaScript日期处理类库，提供了日期格式化、日期解析等功能。中文官网：

技术准备Moment.js类库的使用非常简单，直接在网页中使用script标签引入即可。示例代码：scriptsrc=moment.js/scriptscriptmoment().format();/script

技术准备技术2：HTML5Web存储HTML5提供了两个对象，实现客户端存储数据的能力，这两个对象是：localStorage，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除；sessionStorage，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

技术准备无论是localStorage，还是sessionStorage，它们提供的API都相同：?保存数据：localStorage.setItem(key,value);?读取数据：localStorage.getItem(key);?删除单个数据：localStorage.removeItem(key);?删除所有数据：localStorage.clear();?得到某个索引的key：localStorage.key(index);

03案例实现

案例实现页面结构：

案例实现文件结构：