HTML第18章-综合案例课件2.ppt

上传人(卖家):晟晟文业 文档编号:4421091 上传时间:2022-12-08 格式:PPT 页数:13 大小:817.61KB
下载 相关 举报
HTML第18章-综合案例课件2.ppt_第1页
第1页 / 共13页
HTML第18章-综合案例课件2.ppt_第2页
第2页 / 共13页
HTML第18章-综合案例课件2.ppt_第3页
第3页 / 共13页
HTML第18章-综合案例课件2.ppt_第4页
第4页 / 共13页
HTML第18章-综合案例课件2.ppt_第5页
第5页 / 共13页
点击查看更多>>
资源描述

1、第第18章章 综合案例2案例功能描述案例功能描述1用户登录注册模块设计用户登录注册模块设计2订单管理模块设计订单管理模块设计3客户管理模块设计客户管理模块设计418.1 案例功能描述具体功能具体功能注册新用户,或使用系统内置管理员帐号登录。登录成功后,可以执行下拉列表框中的功能。实现订单管理、客户管理、留言管理等模块,完成数据管理功能。基于基于IndexedDB数据库完成用户注册与登录、订数据库完成用户注册与登录、订单管理、客户管理等模块单管理、客户管理等模块。18.1 案例功能描述 案例的功能模块、涉及的IndexedDB数据库、对象仓库的描述见下表。18.1 案例功能描述 案例包括登录注册

2、、订单管理、客户管理和留言管理等页面。网页文件、对应的JS文件、定义的函数如下。18.2 用户登录注册模块设计18.2.1 页面结构代码分析页面结构代码分析v用户登录注册界面用户登录注册界面参考参考图图18-1。v页面在表单中放置了页面在表单中放置了2个文本框和个文本框和3个命令按钮。个命令按钮。v在初始状态下,下拉列表框是不可用的,当登录成功后,在初始状态下,下拉列表框是不可用的,当登录成功后,可以选择列表框中的选项进入相应的功能模块。可以选择列表框中的选项进入相应的功能模块。v在页面的头部引入了外部的在页面的头部引入了外部的JavaScript文件文件init_data.js。,18.2

3、用户登录注册模块设计18.2.2 CSS代码分析代码分析v为为body标记定义了背景图片标记定义了背景图片v为为h2标记、标记、form标记分别定义了样式标记分别定义了样式v表单上的描述文字统一放置在表单上的描述文字统一放置在span标记中,并定义了样式标记中,并定义了样式v使用属性选择器定义了使用属性选择器定义了input标记的的样式标记的的样式18.2 用户登录注册模块设计18.2.3 JavaScript代码分析代码分析v 页面加载时执行页面加载时执行window_onload()方法,功能是连接数方法,功能是连接数据库对象据库对象Data,创建,创建Web应用的应用的4个对象仓库,创建

4、相关个对象仓库,创建相关的索引。的索引。v 单击单击“登录登录”按钮时执行按钮时执行btnLogin_onclick()方法,完方法,完成登录验证功能成登录验证功能。v 单击单击“注册注册”按钮时执行按钮时执行btnRegister_onclick()方法,方法,完成用户注册功能,对于已经存在的用户给出提示信息完成用户注册功能,对于已经存在的用户给出提示信息。v btnClear_onclick()方法的功能是重置用户信息方法的功能是重置用户信息。18.3 订单管理模块设计18.3.1 页面结构代码分析页面结构代码分析v 订单管理模块实现的是订单数据的输入、追加、修改和删除等功能。v 订单管理

5、页面的主体分为3部分,上部是数据编辑处理区域,中部是功能按钮,下部是订单汇总显示区域,效果如图所示。18.3 订单管理模块设计18.3.2 CSS代码分析代码分析v 订单管理页面的CSS代码从3方面理解。v 第1部分是常规的标记定义,例如body标记、ul标记、li标记、h2标记等。v 第2部分是“旅游订单明细”部分中的数据显示和编辑区域的定义,包括后代选择器.singleLine div、后代选择器.singleLine span、后代选择器等。v 第3部分是汇总显示表格区域的CSS设计,包括使用#infoTable定义表格显示区域,使用后代选择器#infoTable table设置表格的c

6、ellpadding属性、cellspacing属性、font-size属性等。18.3 订单管理模块设计18.3.3 JavaScript代码分析代码分析v num_onblur()方法和price_onblur()方法当数量文本框和单价文本框失去焦点时触发,功能是将金额文本框的值设置为数量与单价之积。v btnAdd_onclick()方法将表单中的信息追加到本地对象仓库orders中,如果追加失败则在控制台中显示错误信息。如果追加成功,将会调用showAlldata()方法重新显示所有订单信息。18.3 订单管理模块设计v btnUpdate_onclick()、btnDelete_onclick()方法 用于修改或删除当前订单编号所对应的订单信息。v tr_onclick(tr,i)方法 将用户单击行的订单信息填入表单各控件中,设定“追加”按钮为无效状态,将“修改”和“新增”按钮设定为有效状态。v showAllData(loadPage)方法和 showData(row,i)方法 从本地数据仓库中查询出所有订单信息v removeAllData()方法 该方法用于清除订单汇总表中的数据18.3 订单管理模块设计v代码略。代码略。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(HTML第18章-综合案例课件2.ppt)为本站会员(晟晟文业)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|