项目演练--当当网上书店项目介绍与开发重点解析.pptVIP

丰泽教育java学院3G学院 丰泽教育java学院3G学院 * 项目演练：当当网上书店 训练的技能点 BOM编程window对象的常用方法 动态的改变页面元素的样式 动态获取或改变页面的内容 使用正则表达式验证表单内容 掌握解决浏览器的兼容性办法 任务描述1-1 需求概述 开发当当网上书店系统 根据不同分类浏览图书，查看最新上架新书、最近畅销图书 在线购买图书，在购物车中可以改变商品的数量 兼容性 页面的脚本特效和CSS样式要兼容IE8.0和Firefox 3.5 任务描述1-2 演示案例：当当网 用例图 问题分析：开发和测试工具2-1 开发工具 Dreamweaver CS4 测试工具 IE Collection（多IE版本共存软件）、Firefox 3.5 问题分析：添加脚本特效2-2 项目开发步骤 明确项目需要的技能 在页面上添加脚本特效 页面测试 功能测试 兼容性测试 难点分析：页面特效 表单即时提示错误信息，改变文本框获得焦点和失去焦点时样式，使用onFocus和onBlur事件 使用innerHTML动态改变层中的内容 使用数组、循环实现图书分类显示，以及下拉列表的级联效果和横幅广告的轮换显示 编写JavaScript特效进行调试时，可以使用alert( )方法 开发计划4-1 用例1：树形菜单[15分钟] 用例2：随滚动条移动的广告图片[20分钟] 用例3：循环显示的广告图片[25分钟] 用例4：弹出窗口[5分钟] 用例5： TAB切换特效[10分钟] 用例6：循环垂直向上滚动的内容[20分钟] 用例7：展示图书内容[25分钟] 开发计划4-2 用例8：商品列表的显示和隐藏[10分钟] 用例9：计算商品金额等[25分钟] 用例10：改变商品数量[20分钟] 用例11：删除商品[25分钟] 用例12：改变文本框样式 [10分钟] 用例13：验证表单[25分钟] 用例14：二级级联下拉列表[15分钟] 用例15：用户登录[20分钟] 用例1：树形菜单 需求说明 网站导航“我的当当”实现下拉树形菜单特效 实现思路 使用onmouseover、onmouseout事件实现鼠标的移进、移出效果 使用DIV的display属性实现层的显示和隐藏 完成时间：15分钟 用例2：随滚动条移动的广告图片 需求说明 页面右侧广告图片带关闭按钮 广告图片随滚动条上下移动 实现思路 在IE下使用currentStyle获取图片所在层的初始位置 在Firefox下使用getComputedStyle获取图片所在层的初始位置 根据滚动条的滚动改变图片所在层的位置 使用DIV的 display属性隐藏图片所在的层 完成时间：20分钟 用例3：循环显示的广告图片 实现思路 带数字按钮的图片广告 多幅图片循环显示 实现思路 图片路径和数字按钮的编号分别保存在两个数组中 使用setInterval或 setTimeout定时显示不同的图片 改变图片的路径，即src属性 使用className属性改变数字按钮的样式 完成时间：25分钟 for(var i=1;i(MaxFrame+1);i++){ if(i==NowFrame){ document.getElementById(dd_scroll).src =scorll_img[i-1]; document.getElementById(…).className=scroll_number_over; } else{ document.getElementById(…).className=scroll_number_out; } } 显示当前图片 设置当前按钮的CSS样式 用例4：弹出窗口 需求说明 打开首页时弹出固定大小的广告窗口页面 实现思路 使用open实现弹出窗口 完成时间：5分钟 用例5： TAB切换特效 需求说明 最新上架内容实现TAB切换特效 实现思路 使用DIV的display属性实现层的显示和隐藏 完成时间：10分钟 用例6：循环垂直向上滚动的内容 需求说明 书讯快递内容实现无缝隙的循环垂直向上滚动特效 实现思路 function moveTop(){ if(dome2.offsetTop-dome.scrollTop=0) { dome.scrollTop-=dome1.offsetHeight;} else{ dome.scrollTop++ } } var MyMar=setInterval(moveTop,speed) dome.onmouseover=function() {clearInterval(M