使用JavaScriptjQuery实现页面特效第五章-实践.pptVIP

* 实践五 指导学习：JavaScript基础 实践目标 动态展示美食特产的类别名称 动态展示休闲食品 按照价格对休闲食品进行排序 按照销量对休闲食品进行排序 使用添加节点的技能，在页面左侧展示食品的类型名称如休闲零食、营养保健和参茸滋补等。 本阶段主要在页面左侧展示食品的类型名称。 任务一：动态展示食品的类型 （1）创建foodlist.js文件，在html文件导入此脚本文件。 （2）在foodlist.js文件中，创建initType()函数。 （3）将窗口的onload事件和initType()函数进行绑定。 任务一：动态展示食品的类型 任务一：动态展示食品的类型 function initType() { var footType = new Array(休闲零食, 营养保健, 参茸滋补, 茶叶, 酒类, 全球美食, 生鲜蔬果, 粮油米面, 奶粉乳品); for (var i in footType) { var obj = document.createElement(li); obj.innerHTML = a href=# + footType[i] + /a; obj.className = info; document.getElementById(foods).appendChild(obj); } } 使用添加节点的技能，在页面的右侧显示每个食品的图片、价格、销量和描述。 在页面右侧以默认的顺序显示休闲类食品的价格、销量、实物图和描述等。 任务二：显示休闲类食品 （1）在foodlist.js文件中，使用自定义函数的方式创建Food类，用Food对象封装每个食品的图片路径、价格、销量和描述内容。 （2）创建数组，保存几个休闲类食品对象的信息。 （3）创建函数showFoods()，遍历foods数组，在循环体中动态创建dl-dt-dd列表，显示当前Food对象的图片、价格、销量和描述，调用appendChild()方法，在页面的div id=“show”版块中，追加创建的dl-dt-dd列表。 （4）将窗口的onload事件和showFoods()函数进行绑定。 任务二：显示休闲类食品 任务二：显示休闲类食品 function Food(desc, price, sale, pic) { this.desc = desc;//描述 this.price = price;//价格 this.sale = sale;//销量 this.pic = pic; //图片 } 任务二：显示休闲类食品 var foods = new Array(); foods[0] = new Food(【百草味】坚果零食特产干果 奶油味夏威夷果200gx3包送开果器 , 46.90, 9257, images/food1.jpg); foods[1] = new Food(【顺丰包邮】 费列罗进口巧克力48粒零食品 妇女节礼盒生日礼物 ,133.00, 13000, images/food2.jpg); foods[2] = new Food(卡可芙 进口料408克臻萃松露巧克力8口味 礼盒装 零食品特价包邮 , 19.90, 72000, images/food3.jpg); foods[3] = new Food(零食坚果特产 二级美国山核桃碧根果长寿果特价 250g装 , 7.5, 220, images/food4.jpg); 任务二：显示休闲类食品 //动态显示食品 function showFoods() { var divPro = document.getElementById(show); divPro.innerHTML = ; for (var i in foods) { var dlObj = document.createElement(dl); var content = dtimg src= + foods[i][pic] + //dt; content += ddp￥span + foods[i][price] + /span/p销量：span + foods[i][sale] + /span/dd; content += dd + foods[i][desc] + /dd; dlObj.innerHTML = content; dlObj.className = eachPro; divPro.appendChi