本书内容包括: HTML+CSS基础项目; JavaScript基础项目; HTML5拖放API项目; HTML5表单API项目; HTML5画布API项目; HTML5媒体API项目; HTML5地理定位API项目; HTML5 Web存储API项目; CSS3项目; 综合应用设计实例。
目 录
第1章 HTML+CSS基础项目 1
1.1 导航栏菜单的设计与实现 1
1.1.1 界面设计 1
1.1.2 鼠标事件 4
1.1.3 完整代码展示 5
1.2 商务风格表格的设计与实现 6
1.2.1 创建表格 6
1.2.2 样式设计 7
1.2.3 完整代码展示 11
第2章 JavaScript基础项目 13
2.1 电子时钟的设计与实现 13
2.1.1 界面设计 13
2.1.2 时钟动态效果的实现 16
2.1.3 完整代码展示 18
2.2 电子日历的设计与实现 19
2.2.1 界面设计 19
2.2.2 显示状态栏中的年份和月份 22
2.2.3 显示当前月份的所有日期 23
2.2.4 按钮控件功能的实现 26
2.2.5 完整代码展示 27
第3章 HTML5拖放API项目 31
3.1 仿回收站效果的设计与实现 31
3.1.1 界面设计 31
3.1.2 文件拖曳与回收功能的实现 34
3.1.3 完整代码展示 37
3.2 图片相框展示的设计与实现 39
3.2.1 界面设计 39
3.2.2 相框自动生成功能的实现 41
3.2.3 完整代码展示 46
第4章 HTML5表单API项目 49
4.1 用户注册页面的设计与实现 49
4.1.1 界面设计 50
4.1.2 表单设计 51
4.1.3 提示与验证功能的实现 54
4.1.4 完整代码展示 58
4.2 问卷调查页面的设计与实现 60
4.2.1 界面设计 61
4.2.2 表单设计 62
4.2.3 验证功能的实现 69
4.2.4 完整代码展示 73
第5章 HTML5画布API项目 79
5.1 手绘时钟的设计与实现 79
5.1.1 界面设计 79
5.1.2 实时更新效果 87
5.1.3 完整代码展示 88
5.2 拼图游戏的设计与实现 91
5.2.1 界面设计 91
5.2.2 实现游戏逻辑 95
5.2.3 游戏成功与重新开始 102
5.2.4 完整代码展示 105
第6章 HTML5媒体API项目 111
6.1 音乐播放器的设计与实现 111
6.1.1 界面设计 111
6.1.2 媒体文件的载入 115
6.1.3 控件功能的实现 115
6.1.4 完整代码展示 119
6.2 在线教学视频的设计与实现 122
6.2.1 界面设计 122
6.2.2 视频文件的载入与播放 127
6.2.3 视频时间跳转的实现 128
6.2.4 完整代码展示 130
第7章 HTML5地理定位API项目 133
7.1 运动数据记录页面的设计与实现 133
7.1.1 界面设计 134
7.1.2 实时监控地理定位 135
7.1.3 开始与结束按钮的切换 136
7.1.4 计算与显示距离 138
7.1.5 完整代码展示 140
7.2 运动轨迹绘制页面的设计与实现 144
7.2.1 界面设计 144
7.2.2 开始与结束按钮的切换 146
7.2.3 绘制地图与运动轨迹 146
7.2.4 计时功能的实现 151
7.2.5 完整代码展示 153
第8章 HTML5 Web存储API项目 157
8.1 基于Web存储技术的网页主题设置 157
8.1.1 界面设计 157
8.1.2 重置网页主题颜色的实现 160
8.1.3 加载网页主题颜色的实现 162
8.1.4 完整代码展示 163
8.2 基于Web存储技术的网页日志本 165
8.2.1 界面设计 165
8.2.2 读取日志功能的实现 168
8.2.3 保存日志功能的实现 169
8.2.4 删除日志功能的实现 170
8.2.5 完整代码展示 171
第9章 CSS3基础项目 175
9.1 使用CSS3文本阴影制作特殊字体效果 175
9.1.1 整体设计 175
9.1.2 火焰文字效果的实现 177
9.1.3 霓虹文字效果的实现 178
9.1.4 完整代码展示 179
9.2 使用CSS3动画制作响应式放大菜单 180
9.2.1 整体设计 180
9.2.2 动画效果的实现 182
9.2.3 完整代码展示 183
第10章 综合应用设计实例 185
10.1 基于HTML5的贪吃蛇游戏的设计与实现 185
10.1.1 贪吃蛇游戏简介 185
10.1.2 界面布局设计 185
10.1.3 数据模型设计 190
10.1.4 游戏的逻辑实现 192
10.1.5 完整代码展示 203
10.2 实战项目——企业文化用品展示网页的开发 207
10.2.1 项目简介 207
10.2.2 整体布局设计 208
10.2.3 页眉和页脚的实现 210
10.2.4 主体内容的实现 212
10.2.5 完整代码展示 225
HTML5拖放API项目
本章主要包含两个基于HTML5拖放API的应用设计实例，一是仿回收站效果的设计与实现，二是图片相框展示的设计与实现。在仿回收站项目中，主要难点为元素的拖曳以及回收效果；在图片相框展示项目中，主要难点为文件的拖曳、自动生成带有相框的图片以及显示图片文件信息的技术。
本章学习目标：
* 学习如何综合应用HTML5拖放API、CSS与JavaScript开发仿回收站效果；
* 学习如何综合应用HTML5拖放API、CSS与JavaScript开发图片相框展示效果。
3.1 仿回收站效果的设计与实现
【例3-1】 基于HTML5拖放API的仿回收站效果的设计与实现
背景介绍：在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖曳并放置到桌面回收站图标上以实现文件的删除。
功能要求：使用HTML5拖放API相关技术在网页上实现仿回收站的类似效果。用户通过拖曳可以将页面上的元素放置到回收站中删除。效果如图3-1所示。
书单推荐
