《使用javascriptjquery实现页面特效第五章-实践》由会员分享，可在线阅读，更多相关《使用javascriptjquery实现页面特效第五章-实践（16页珍藏版）》请在金锄头文库上搜索。
1、实践五 指导学习：JavaScript基础,实践目标,动态展示美食特产的类别名称 动态展示休闲食品 按照价格对休闲食品进行排序 按照销量对休闲食品进行排序,使用添加节点的技能，在页面左侧展示食品的类型名称如休闲零食、营养保健和参茸滋补等。 本阶段主要在页面左侧展示食品的类型名称。,任务一：动态展示食品的类型,（1）创建foodlist.js文件，在html文件导入此脚本文件。 （2）在foodlist.js文件中，创建initType()函数。 （3）将窗口的onload事件和initType()函数进行绑定。,任务一：动态展示食品的类型,任务一：动态展示食品的类型,function init
2、Type() var footType = new Array(“休闲零食“, “营养保健“, “参茸滋补“, “茶叶“, “酒类“, “全球美食“, “生鲜蔬果“, “粮油米面“, “奶粉乳品“); for (var i in footType) var obj = document.createElement(“li“); obj.innerHTML = “ + footTypei + “; obj.className = “info“; document.getElementById(“foods“).appendChild(obj); ,使用添加节点的技能，在页面的右侧显示每个食品的图
3、片、价格、销量和描述。 在页面右侧以默认的顺序显示休闲类食品的价格、销量、实物图和描述等。,任务二：显示休闲类食品,（1）在foodlist.js文件中，使用自定义函数的方式创建Food类，用Food对象封装每个食品的图片路径、价格、销量和描述内容。 （2）创建数组，保存几个休闲类食品对象的信息。 （3）创建函数showFoods()，遍历foods数组，在循环体中动态创建dl-dt-dd列表，显示当前Food对象的图片、价格、销量和描述，调用appendChild()方法，在页面的版块中，追加创建的dl-dt-dd列表。 （4）将窗口的onload事件和showFoods()函数进行绑定。,
4、任务二：显示休闲类食品,任务二：显示休闲类食品,function Food(desc, price, sale, pic) this.desc = desc;/描述 this.price = price;/价格 this.sale = sale;/销量 this.pic = pic; /图片 ,任务二：显示休闲类食品,var foods = new Array(); foods0 = new Food(“【百草味】坚果零食特产干果 奶油味夏威夷果200gx3包送开果器 “, 46.90, 9257, “images/food1.jpg“); foods1 = new Food(“【顺丰包邮】
5、费列罗进口巧克力48粒零食品 妇女节礼盒生日礼物 “,133.00, 13000, “images/food2.jpg“); foods2 = new Food(“卡可芙 进口料408克臻萃松露巧克力8口味 礼盒装 零食品特价包邮 “, 19.90, 72000, “images/food3.jpg“); foods3 = new Food(“零食坚果特产 二级美国山核桃碧根果长寿果特价 250g装 “, 7.5, 220, “images/food4.jpg“);,任务二：显示休闲类食品,/动态显示食品 function showFoods() var divPro = document.g
6、etElementById(“show“); divPro.innerHTML = “; for (var i in foods) var dlObj = document.createElement(“dl“); var content = “; content += “￥“ + foodsi“price“ + “销量：“ + foodsi“sale“ + “; content += “ + foodsi“desc“ + “; dlObj.innerHTML = content; dlObj.className = “eachPro“; divPro.appendChild(dlObj);
7、,使用冒泡排序，实现按照价格、销量排序休闲食品。 （1）当选择下拉列表框的“价格”时，休闲食品按照价格升序排序。,任务三：实现按照价格、销量排序休闲食品,（2）当选择下拉列表框的“销量”时，休闲食品按照销量的升序排序。,任务三：实现按照价格、销量排序休闲食品,（1）创建函数sortByPrice()，利用冒泡排序，在每一轮中，比较数组中相邻食品的价格，如果前者的价格大于后者，则交换这两个的数组元素。直到foods数组按照价格的升序来保存所有的休闲食品。 （2）创建函数sortBySale()，利用冒泡排序，在每一轮中比较数组中相邻食品的销量，如果前者的销量大于后者，则交换这两个的数组元素。直到
8、数组按照销量的升序来保存所有的休闲食品。 （3）创建函数sortPro()，根据用户的选择，来显示食品。 （4）将列表框的onchang事件和sortPro()函数绑定。,任务三：实现按照价格、销量排序休闲食品,任务三：实现按照价格、销量排序休闲食品,function sortByPrice() for (var i = 0; i foodsj + 1“price“) var temp = foodsj; foodsj = foodsj + 1; foodsj + 1 = temp; ,任务三：实现按照价格、销量排序休闲食品,/按照销量排序 function sortBySale() for (var i = 0; i foodsj + 1“sale“) var temp = foodsj; foodsj = foodsj + 1; foodsj + 1 = temp; ,End,谢谢观看,
