基于HTML5的网络书店系统研究毕业设计.doc

I 毕业设计毕业设计 班级名称班级名称 1212 嵌入式 嵌入式 1 1 班 班 专业名称专业名称 计算机应用技术计算机应用技术 课题名称课题名称 基于基于 HTML5HTML5 的网络书店系统的网络书店系统 学生姓名学生姓名 指导教师指导教师 20152015 年年 5 5 月月 2020 日日 II 基于 HTML5 的网络书店系统研究 摘摘 要要 Html5 是一种建立在平台之上的动态网页制作语言 它是一种网 页浏览的新标准 它在原有的 HTML 基础上新增和优化了部份内容 使得网页更加快捷和对外部更加兼容 本课题用 HTML5 语言开发小型网络书店网站 主要目的是运用 HTML5 技术于网络书店 探讨 HTML5 这一新技术带来的变革 并对 HTML5 的一些新特性进行了研究和实验 本文阐述了网络书店的设计 与实现 给出了网站的系统分析 描述了网页设计概况 关键词 HTML5 网络书店 网站 III 目录目录 摘摘 要要 III 目录目录 IV 第第 1 1 章章 绪论绪论 1 1 1 本课题国内外研究现状 1 1 1 1 国外现状 1 1 1 2 国内现状 3 1 2 本课题研究目的 6 1 3 论文结构 7 第第 2 2 章章 研究内容及相关技术研究内容及相关技术 8 2 1 研究内容 8 2 2 相关技术介绍 11 2 2 1 PHP APACHE MYSQL 11 2 2 2 HTML5 13 第第 3 3 章章 系统设计系统设计 15 3 1 图书展示功能 15 3 2 图书查询功能 15 3 3 留言功能 涂鸦功能 16 3 4 图书评选功能 16 第第 4 4 章章 系统详细设计及实现系统详细设计及实现 17 4 1 数据库设计与实现 17 4 2 网站具体实现 18 4 2 1 网站首页 18 4 2 2 查询功能 19 4 2 3 留言板设计 21 4 2 4 图书评选 24 致谢致谢 26 参考文献参考文献 27 1 第第 1 1 章章 绪论绪论 1 11 1本课题国内外研究现状本课题国内外研究现状 网络书店是随着网络技术的发展而出现的一种售书渠道 它通过人与电子通 信方式相结合 依靠互联网实现图书的在线交易 与传统的书店相比 网络书店 既可以避免书目订货的局限和盲目 又可以克服看样订货投入大 费用高 管理 难的不足 而且网上选择范围广能直观看样本 可浏览内容 可随时添订 结算 及时 快捷方便 周转高速 这些优势是其它交易方式难以达到的 目前比较著名的国内外网络书店有 亚马逊 当当网 1 1 1 课题的背景 如今 游戏机风行的程度 是第一台电子游戏机的研制者诺兰 布什纳尔先生始料不及的 在全世界最大的城市 直至最小的村庄 从纽约最辉煌的游乐场 到高加索最小的乡镇儿童 娱乐点 在千家万户 正在进行着千千万万这样的 战斗 伴随着无数成功与失败 兴奋 与懊丧 游戏机带来了一个全球性的疯狂症 其他任何娱乐与之相比都望尘莫及 然而 究 竟是什么原因使游戏机如此风行呢 在回顾了游戏机发展简史之后 我们不难悟出 技术进 步在游戏机发展过程中起到了极大的促进作用 但是 技术进步绝不是游戏机风行的唯一因素 随着终端设备开发能力的加强 作为娱乐终 端的游戏机也得到了很大程度的发展 这也加速了游戏机在全球风行程度 所以对于游戏机 的研究和设计具有很重要的意义 这也是本课题研究的来源 1 1 2 课题的意义和目的 用单片机来设计一个游戏 不同于现在的大型网络游戏和手机游戏 也不同于其他的小型的 单片机控制程序 它对游戏编写者对单片机架构 指令系统 工作模式 数据在内存分配以 及传递的把握都提出了更高的要求 特别是游戏运行当中对外部按键的处理 各子程序的调 用流程 先后顺序等代码的复杂程度也都是单片机的一般程序不能比的 可以这样说 能完 整的编出游戏 并可以稳定运行 会让我们对游戏有一个更深刻的认识 对游戏编写的难度 有一个更切身的理解 对自己的编程能力及逻辑思维能力有一个很大的提高 再一次看到 C 语言的适用性 易移植性 高效性 相信对 C 语言的学习也不无帮助 此次课题的目的 1 巩固 加深和扩大大家对 51 系列单片机应用的知识面 提高综 2 合及灵活运用所学知识解决工业控制 的能力 2 培养针对课题需要 选择和查阅有关手册 图表及文献资料的自学能力 提高组成系统 编程 调试的 1 1 2 课题的意义和目的 用单片机来设计一个游戏 不同于现在的大型网络游戏和手机游戏 也不同于其他的小型的 单片机控制程序 它对游戏编写者对单片机架构 指令系统 工作模式 数据在内存分配以 及传递的把握都提出了更高的要求 特别是游戏运行当中对外部按键的处理 各子程序的调 用流程 先后顺序等代码的复杂程度也都是单片机的一般程序不能比的 可以这样说 能完 整的编出游戏 并可以稳定运行 会让我们对游戏有一个更深刻的认识 对游戏编写的难度 有一个更切身的理解 对自己的编程能力及逻辑思维能力有一个很大的提高 再一次看到 C 语言的适用性 易移植性 高效性 相信对 C 语言的学习也不无帮助 此次课题的目的 1 巩固 加深和扩大大家对 51 系列单片机应用的知识面 提高综 合及灵活运用所学知识解决工业控制 的能力 2 培养针对课题需要 选择和查阅有关手册 图表及文献资料的自学能力 提高组成系统 编程 调试的动手能力 3 对课题设计方案的分 析 选择 比较 熟悉用 51 单片机做系统开发 研制的过程 软硬件设 计的方法 内容及步骤 4 进一步掌握 C 语言在硬件编程中的应用 熟悉怎样用 C 语言实现 LCD 上的绘图功能 1 1 3 课题国内研究现状 目前国内游戏公司已达到了 200 多家 市场上运营的游戏亦达 250 多款 但与欧美 韩国等 国家的游戏发展程度还有一定差距 我国有广阔的游戏市场 宽阔的发展空间 无限的继续 挑战和剧增的玩家队伍 随着网络的兴起 巨大的市场需求量使中国在短短几年 已经从无 到有 从陌生到熟悉 从掌握到运用 游戏必将成为网络竞争的主角 他的商业利益和商业 价值无法估量 中国 人口众多的国家 随着人们生活水平的提高 温饱已经不是最终目的 我们寻求的是更加多姿多彩的生活 那么我们怎么能错过游戏这一最佳休闲娱乐项目呢 所 以我国游戏发展前景一片大好 更应加大游戏开发力度 1 1 1 国内现状 我国有庞大的网民基数和民众购买行为的改变 因此网络书店在我国存在着 巨大的市场潜力 当当网是一个 纯网络 型 BtoC 网上商店 当当网自 1999 年 11 月开通 号称是目前全球最大的中文网上图书音像商城 面向全世界中文 读者提供近三十多万种中文图书和音像商品 每天为成千上万的消费者提供方便 快捷的服务 给网上购物者带来极大的方便和实惠 当当网的使命是坚持 更多 3 选择 更多低价 全球已有 2000 万的顾客在当当网上选购自己喜爱的商品 当当网的网页最上层是分类区 方便用户根据自己的要求查询 在左面是商 品分类 包括百货 图书 杂志 影视 音乐 游戏等的分类 其中提供的三十 万种图书 占中国大陆可供书市场的百分之九十 另外还有店中店的商品分类 中间是主要的广告内容 在右边就是最近的一些新产品以及 TOP 排行榜 当当网还设立了专门的论坛 不论你是对商品 服务 还是网站有任何的不 满 或者对当当网有什么建议 你都可以在论坛上发表你的观点 这样不但有利 于其他客户增加对该商品的了解 也有助于网站的设计或管理人员及时修补网站 的漏洞 使网站的功能更强大 更快更好的满足顾客的个性化需求 搜索比价系统 是当当网开发的智能比价系统 通过此系统 当当每天都实 施对其他电子商务网站的同类商品与当当网同类商品的价格进行对比 如果对方 同类商品价格低于当当网商品价格 此系统将自动调低当当网同类商品的价格 2006 年 10 月下旬 当当网个性化商品推荐功能上线 其全新推出的 为你 推荐 个性化服务的过人之处在于 当当网购物系统将根据顾客的购物习惯自动 向他们推荐相关商品 另外 细心的网络顾客还会发现 当当网的购物搜索也悄 然更换了面孔 出去界面变得更简洁清新外 更重要的是 如今当当网顾客的搜 索范围不仅包括当当网近百万自营商品 还把当当数千家店中的各类商品一搜到 底 显然 再打出 搜索 个性化 网购组合后 当当网在电子商务市场不但增 强了顾客粘性 而且再次引领了市场趋势 目前当当网进军移动市场 开发并发布了 iphone 版 Android 版 iPad 版 Windows Phone 版以及 Android Pad 版如此之多的 APP 以方便用户随时随地通 过移动设备访问 这不禁让人联想到整个系统的开发 更新以及维护是十分麻烦 的 如果使用 HTML5 技术这些问题便可迎刃而解 只需要考虑浏览器是否支持即 可 从而省去众多 APP 的开发 维护费用 专注于电子商务事业 当当网在 pc 机访问和在手机使用 APP 访问效果如下 图 1 4 当当网主页 图 1 5 当当网手机 APP 界面 4 由此可见 当当网在电脑和移动终端的用户体验是完全不同的 一些动态效 果是无法体现的 HTML5 就不同了 使用电脑和手机访问视频 音乐 动态效果 是不会发生改变的 图 1 6 HTML5 拖拽页面 图 1 7 手机上拖拽页面 1 21 2本课题研究目的本课题研究目的 尽管亚马逊和当当网已经相当成功 但是随着无线网络技术的成熟 包括手 机 平板电脑在内的移动终端备受人们青睐 大多数传统的电子商务网站都面临 着如何很好的支持移终端这一问题 随时随地上网浏览并获取所需信息 真可谓 一切尽在 掌 握 然而目前便携设备对于一些网络应用支持的不是十分完美 比如说网络书店 我们用便携设备浏览亚马逊 当当网时 看到的并不是电脑上 看到的那样的网页 而是 App 这种把网站做成 App 以便支持便携设备浏览的做 法 无疑给电子商务企业带来额外的技术费用开支 但是随着 HTML5 的出现将改 变这一现状 以往我们用 Flash 或者是 Java 在网站之中嵌入网页应用程序 这种技术并 不是浏览器原生的 所以说并不是能对于网页提供无缝的支持 尤其是对于手机 平板电脑等移动终端的支持不是很完美 需要 APP 来完成 但是 Html5 就不是这 样的了 Html5 是一种标准 只要是浏览器遵循这样的标准我们就能调用底层的 硬件对于上层的网页进行显示 而且也是能方便的编写各种 Web 应用 1 换言 之 就是使用 HTML5 技术开发一个网页 无论用户通过什么终端访问 看到的都 是原生态的网页 它的音视频播放不依赖任何第三方插件 无需安装 Flash SVG 通过移动设备访问只需使用支持 HTML5 的浏览器即可 无需 APP 技 术 1 31 3论文结构论文结构 本文主要是对基于 HTML5 的网络书店系统原理的研究 同时通过部署 APACHE 服务器 使用 MySQL 数据库 自己设计和开发 web 网站来实现基于 HTML5 5 的网络书店系统 第一章 绪论 主要介绍了研究背景 目前网络书店的国内外发展情况 同 时对本文的主要工作做了简单的介绍 第二章 研究内容及相关技术 主要对相关技术 如 PHPnow Apache PHP MySQL HTML5 做了详细的介绍与分析 第三章 系统设计 主要对系统进行总体设计 对系统的架构进行设计 对 系统所需要完成的功能提出需求 包括查询系统 留言系统 图书评选系统 第四章 系统详细设计及实现 主要是完成基于 HTML5 的网络书店系统的实 现 对各个模块进行详细设计和开发 数据库的详细设计与实现 第五章 总结与展望 主要是对本系统的总结 今后要做的工作以及未来 HTML5 技术的前景 第第 2 2 章章 研究内容及相关技术研究内容及相关技术 2 12 1研究内容研究内容 随着 HTML5 的迅猛发展 各大浏览器开发公司如 Google 微软 苹果 Mozilla 和 Opera 的浏览器开发业务都变的异常繁忙 近年来无论是 Mozilla 的 Firefox Google 的 Chrome 苹果的 Safar 还是微软的 Internet Explorer 以及 Opera 都处于不断推陈出新的状态当中 2 HTML5 是一种技术 或者说是 一种网页浏览的新标准 著名调查公司 AC 尼尔森的一项研究显示 中国网民有超过五分之三的人群 在网上购物 而超过一半的网上购物者选择网上买书 也就是说最受欢迎的网上 商品是书籍 而随着移动终端的粉墨登场 由于使用 HTML5 技术的网络书店具有 优秀的跨平台 跨终端能力 仅需要一个浏览器就可以 所以这将是网络环境下 图书发行的必然发展趋势 电脑上通过 Web 浏览器执行的 HTML5 应用正取代安装 型本地应用成为主流 这一潮流也蔓延到了智能手机 火狐 OS 及 Tizen 等主推 HTML5 的移动 OS 已经问世 谷歌也做出多项决策 要将安卓大幅转向 HTML5 本课题旨在以制作网络书店为前提 体验 HTML5 这一新技术 众所周知 框 6 架可以帮助我们更快速 更容易实现功能 让开发者集中精力于更重要的方面 而不会浪费时间做重复的任务 本网络书店系统想要实现一下 HTML5 新特性 1 HTML5 全新的标签 取消了一些过时的标记 HTML4 中的内容标签级别相同 无法区分各部分内 容 而 HTML5 中的内容标签互相独立 级别不同 搜索引擎以及统计软件等均可 快速识别各部分内容 千篇一律的注定要淘汰掉 如图 2 1 所示 HTML5 与之前布满的页面相比 已经变得清晰了很多 涉及的各种头部 都会包含在标签内 各种结尾内容都会使用标签 导航菜单放 在标签 主要内容放在标签 独立的文章部分放在标签 相关简介等内容放在侧边标签内 图 2 1 全新的标记 2 全新的表单对象 在实际的表单应用中 一些数据输入需要一个独立的规则 如邮箱地址 网 址等 我们都会提供一个特定的格式限定和验证 HTML5 对表单的发展是适应互 联网发展的需要 也是在适应开发者的需要 在做表单处理的时候 最常用的就 是表单验证了 一般的验证会写很多冗长的 JavaScript 代码 或者借助一些基 于 JavaScript 的验证框架 如目前较为流行的 jQuery 的验证框架 HTML5 发展 了这些表单 把具有特定规则意义的表单 扩展一些特有的特性作为表单的原始 功能 验证表单的功能 也作为表单本身应具备的功能 原生地被支持 即可以 抛弃 JavaScript 或者是 PHP 只通过 HTML5 来定义表格单元的输入格式和这个 单元是否是必填的等等 3 Canvas 对象 7 到目前为止 基本上想要直接在网页上进行绘图还是不能轻易完成的 即使 是几何图形也不可以 在浏览器当中直接能跟图片的交互操作也很有限 多数是 保存和点击 若要在页面中实现绘图就要借助第三方工具 如 Flash SVG VML 等 这种做法无疑把问题复杂化了 在互联网应用不断的发展中 页面绘图使用 越来越多 Canvas 元素应运而生 HTML5 了解人们的需求 HTML5 已经确定引 入 canvas 元素 它自己没有行为 只是把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘到一块画布上 4 HTML5 取代 Flash 在 HTML5 之前 要在网页中添加音频或视频 最简单 最通用的方法 是使 用 Flash 如果在网站上要放置一个 Flash 视频 通常需要对 Adobe ActionScript 和专有工具有很强的理解 才能编码视频和创建播放器控件 在 HTML5 中实现多媒体 不需要知道数据类型 因为标签已经指明 也不需要设置 版本信息 因为不涉及 可以有 css 样式表来控制尺寸 因为它们是页面元素 只需要一行代码就可以 这些原生的优势 是其他任何第三方插件都无法企及的 5 可触到的拖放功能 在 WEB 应用中良好的用户体验是设计师们一直追求的目标 拖放体验就是其 中之一 HTML5 的拖放包括三个方面 首先为页面元素提供了拖放特性 其次是 为鼠标事件增加了拖放事件 最后是用于存储拖放数据的对象 本系统应用页面 拖放特性 即新增的 draggable 特性 该特性有三个可选值 true false 和 auto 用于定义元素是否允许用户拖放 为了使拖放控制更加具体 HTML5 提供了 7 个与拖放相关的鼠标响应事件 dragstart 事件 开始拖放时触发的事件 作用对象是被拖放元素 drag 事件 拖放过程中触发的事件 作用对象是被拖放元素 dragenter 事件 有拖放的元素进入本元素范围内时触发 作用对象是 拖放过程中鼠标经过的元素 dragover 事件 有拖放的元素在本元素范围内移动时触发 作用对象是 拖放过程中鼠标经过的元素 8 dragleave 事件 有拖放的元素离开本元素时触发 作用对象是拖放过 程中鼠标经过的元素 drop 事件 有拖放的的元素被拖放到本元素中时触发 作用对象是拖放 的目标元素 dragend 事件 拖放操作结束时触发 作用对象是被拖放元素 在拖放过程中通过触发这 7 个拖放事件来实现页面的灵活控制 6 强大的离线应用 随着人们对 Web 应用的依赖逐渐增强 对 Web 应用的要求也越来越高 但是 Web 应用通常都有一个致命的缺陷 就是如果不能连接网络或网络不畅通便无法 使用 Web 应用程序 HTML5 的离线存储使得这个问题迎刃而解 HTML5 的 Web storage API 采用离线缓存技术 会生成一个清单文件 manifest file 这个 清单文件实质就是一系列的 URL 列表文件 这些 URL 分别指向页面当中的 HTML CSS Javascript 图片等相关内容 使用离线应用时 应用会引入这一 清单文件 浏览器会读取这一文件 下载相应的文件 并将其缓存到本地 使得 这些 web 应用能够脱离网络使用 而用户在离线时的更改也同样会映射到清单文 件中 并在重新连线之后将更改返回应用 工作方式与我们现在所使用的网盘有 着异曲同工之处 2 22 2相关技术介绍相关技术介绍 2 2 1 PHP APACHE MYSQL PHP 是最流行的 Web 脚本语言之一 它运行在 Web 服务器端 根据用户请求 或服务器端的数据产生动态网页 它功能强大 和 HTML 脚本融合在一起 并内 建访问数据库的能力 它能够作为 Apache Web 服务器的模块执行使得执行效率 较高 PHP 特性 1 开放源码 它是遵循 GNU 通用公共许可的免费软件 2 没有运行费用 PHP 是免费的 3 基于服务器端 由于 PHP 是在 Web 服务器端运行的 PHP 程序可以很大 很复杂而不会降低客户端的运行速度 9 4 跨平台能力好 PHP 程序可以运行在 UNIX Linux 或者 Windows 操作系 统下 5 嵌入 HTML PHP 的使用不需要编译 不需要编译成可执行文件 而是将 PHP 代码嵌入到 HTML 内部 其使用过程和 ASP 一样 所以 PHP 比较容易学习 6 用户可以使用 PHP 存取任何支持 ODBC 标准的数据库 Apache 是开放源码软件中的一个成功典范 几年间 它一跃成为市场占有 率很高的 Web 服务器 并获得了 Web 管理员们的广泛青睐 被认为是 价格低廉 升级容易 安全可靠 的产品 网络为 Apache 提供了孕育的温床 Apache 的成 功也给予开源的网络开发模式以强有力的证明 这是一个和商业模式结合得如此 完美的开放源代码软件 它的许可证制度保证了它的健康发展 既不脱离开放源 代码世界 也不因为缺乏资金而夭折 apache 的特性 1 几乎可以运行在所有的计算机平台上 2 支持最新的 http 1 1 协议 3 简单而且强有力的基于文件的配置 httpd conf 4 支持 http 认证 5 集成的代理服务器 6 可以通过 web 浏览器监视服务器的状态 7 具有用户会话过程的跟踪能力 本课题选用 Apache PHP MySQL 技术完成 即目前比较流行的 PHPnow PHPnow 是 Win32 下绿色的 Apache PHP MySQL 环境套件包 简易安装 快速搭建支持虚拟主机的 PHP 环境 附带 PnCp cmd 控制面板 可以快速配置 套件 使用非常方便 安装 PHPnow 只需解压 初始化 就可得到一个标准的 PHP MySQL 的服务器环境 10 图 2 1 PHPnow 环境 2 2 2 HTML5 HTML5 是用于取代 1999 年所制定的 HTML 4 01 和 XHTML 1 0 标准的 HTML 标准版本 现在仍处于发展阶段 但大部分浏览器已经支持某些 HTML5 技术 HTML 5 有两大特点 首先 强化了 Web 网页的表现性能 其次 追加了本地数 据库等 Web 应用的功能 广义论及 HTML5 时 实际指的是包括 HTML CSS 和 JavaScript 在内的一套技术组合 它希望能够减少浏览器对于需要插件的丰富 性网络应用服务 如 Adobe Flash Microsoft Silverlight 与 Oracle JavaFX 的需求 并且提供更多能有效增强网络应用的标准集 HTML5 的一些特性 1 表单验证轻松搞定 以前 制作一个表单提交页面 需要各种验证与判断 现在则只需要在标签内使用自带的属性和正则表达式 就能解决问题 11 2 数据类型扩大一倍 大量新增的 input 属性带来的更加友好的用户界面 是以前需要花费巨大的精力与成本去实现的 可以毫不夸张地说 从一个小小 的 input 标签属性的变化就可以预见 HTML5 应用的美好前景 3 动画简单易懂 以前 制作一个简单的动画效果必须要依赖 JavaScript 和 Flash 编写大量的脚本 或者制作动画帧 而现在 依赖强大的 CSS3 动画 属性将快速高效地开发出各种动画效果 甚至 3D 效果的制作都将是一件轻而易 举的事情 4 原生支持无需插件 以前网页中对音频和视频的处理都会依赖各种插件来 完成 这一直是使用 HTML 4 标准进行网页设计时的一个遗憾 但是 现在 HTML5 对音频和视频的处理有了强大的支持 audio 和 video 标签就是专门为此 而诞生的 各种可控的属性 预载 插页功能都令人激动不已 因为我们知道原 生的意义重大 3 HTML5 的优点 1 提高可用性和改进用户的友好体验 2 有几个新的标签 这将有助于开发人员定义重要的内容 3 可以给站点带来更多的多媒体元素 视频和音频 4 可以很好的替代 FLASH 和 Silverlight 5 当涉及到网站的抓取和索引的时候 对于 SEO 很友好 6 将被大量应用于移动应用程序和游戏 由于 PHPnow 的免费 方便 HTML5 的上述优秀特性 所以本课题选用 APACHE PHP MYSQL 环境 HTML5 语言 PHP 语言完成 使得本系统拥有卓越的跨 平台 跨终端能力 并具有良好的可修改 可扩展性 12 第第 3 3 章章 系统设计系统设计 网络书店是网络环境下图书发行的典型代表 越来越齐全的品种让消费者对 其依赖度日益增加 本研究是基于 HTML5 的网络书店系统的研究 主要目的是运 用 HTML5 技术于网络书店 探讨 HTML5 这一新技术带来的变革 用 HTML5 作为前端语言 PHP Apache MySQL 构架一个网络书店系统 要充 分体现 HTML5 的优点所在 就目前来讲 HTML5 并不是很完美的获得各大浏览器 的支持 本网站使用对 HTML5 支持较好的 chrome 浏览器展示 本系统共有如下几个模块图书查询 留言系统 评选系统 整个网站由 HTML5 的标准来建设 最显著的标志就是代码首行以简洁的 开始 而不带版本信息等其他内容 用标签 JQuery 做出其 炫丽的 2D 3D 效果美化网站 给人耳目一新的感觉 13 3 13 1图书展示功能图书展示功能 HTML5 的新元素产生更干净的代码 让页面更易懂 虽然 依 然有效 但不会像以前那般频繁的应用了 很多页面更喜欢用 等去定义 本系统采用 css 样式制定文字 Logo 摆脱把 Logo 做成图片贴上去的牢笼 使用 CSS 网络字体功能直接使用文字元素使得字体图片矢量化 而不依赖于图片 不像以前制作带有个性化字体的 WEB 效果需要用图片来辅助完成 所有的阴影 圆角效果都是直接使用 CSS 设计制作 摆脱了将它们设计之好后定格在图片中的 方式 使这一效果可以控制 3 23 2图书查询功能图书查询功能 查询页面定义一块 制作一个实时更新 显示时间的数字时钟 使 用 标签添加音 视频 原生支持无需插件 不依赖于 Flash SVG 等 并且内置强大的可控属性 预载功能 唯一需要解决问题就是 HTML5 目前支持音 视频的格式较少 查询功能使用 HTML5 标签内自带的属性和正则表达式 取代之前要用 Javascript 的 onblur onfocus 来单独做一块验证功能 使用 PHP 语言 MySQL 数据库完成 3 33 3留言功能 涂鸦功能留言功能 涂鸦功能 留言模块使用 HTML5 新的表单验证功能 在表单验证方面 使用了标签内自 带的属性和正则表达式 取代之前要用 Javascript 的 onblur onfocus 来单独 做一块验证功能 二维作画功能在页面实现也比以前简单许多 它不需要用到 Flash SVG 等 插件 只需定义一块画布 这是为了客户端矢量图形而设计的能够把想 绘的东西绘制在画布上 在留言板使用涂鸦功能 14 3 43 4图书评选功能图书评选功能 评选功能由拖放特性实现 良好的用户体验是设计师们的追求 而这华丽的 拖放功能就是其中之一 所以使用拖拽功能做出图书评选这一块 过去我们想实 现网页中的拖拽效果 基本上都是使用 DOM 事件模型中的 mousedown mousemove mouseup 的事件监听来模拟拖拽效果 为了实现实时的 拖拽移动效果 要不停地获取鼠标的坐标 还要不停的修改元素的位置 代码要 堆很多 而且性能上也很不好 不停地修改元素位置会导致页面 reflow 除非绝 对定位 现在有了 html5 原生的 Drag else if typeof arg string this canvas document getElementById arg else return this init Draw prototype init function var that this if this canvas getContext return 21 this context this canvas getContext 2d this canvas onselectstart function return false this canvas onmousedown function event that drawBegin event drawBegin function e var that this stage info this canvas getBoundingClientRect window getSelection window getSelection removeAllRanges document selection empty this context moveTo e clientX stage info left e clientY stage info top document onmousemove function event that drawing event document onmouseup this drawEnd drawing function e var stage info this canvas getBoundingClientRect this context lineTo e clientX stage info left e clientY stage info top this context stroke drawEnd function document onmousemove document onmouseup null 22 var draw new Draw the stage 4 2 4 图书评选 用可拖拽元素来实现图书评选功能 在元素中设置 draggable true 即可实现图片拖拽 响应鼠标拖 放之前使用渐变效果 并没有使用图形设计软件 而是直接通过一个线性命令完 成渐变效果 即在 CSS 中设置渐变效果 完成一次成功页面内元素拖拽的行为事件过程应该是 dragstart dragenter dragover drop dragend 图 4 6 拖拽前 图 4 7 拖拽后 23 Css 样式部分代码如下 test border width 1px border style solid border radius 11px padding 5px webk