900字范文 > 食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

时间：2018-09-11 03:01:34

HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

文章目录

HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>购物车</title><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script src="js/jquery1.42.min.js" type="text/javascript"></script><script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script><script src="js/publicNav.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script><script type="text/javascript" src="js/showCartBox.js"></script><link href="css/base.css" rel="stylesheet" type="text/css" /></head><body><div class="topMenu"><div class="indexCont"><ul class="fl tW tL" style="width:190px;"><li class="b1"><i></i><a href="javascript:;">收藏我买网</a></li><li class="b2"><i></i><a href="javascript:;">移动客户端</a></li></ul><div class="fr tW"><ul class="fl"><li class="login" style="white-space:nowrap;height:32px;line-height:32px;"> <b>您好，欢迎您来到顺丰优选</b> <a href="javascript:;">登录</a> <a href="javascript:;">注册</a> <a href="userOrder.html">我的订单</a> </li></ul><ul id="tMenu" class="fr tW tmCont"><li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 我的素品 </a></strong><div class="top_hidebox wdsp"><div class=""> <a href="userOrder.html">我的订单</a> </div><div> <a href="javascript:;">我的积分</a> </div><div> <a href="javascript:;">我的收藏</a> </div><div> <a href="javascript:;">账户余额</a> </div><div> <a href="javascript:;">我的选项卡</a> </div><div> <a href="javascript:;">我的优惠券</a> </div></div></li><li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 服务中心 </a></strong><div class="top_hidebox"><div class=""> <a href="javascript:;">购物指南</a> </div><div> <a href="javascript:;">配送服务</a> </div><div> <a href="javascript:;">支付方式</a> </div><div> <a href="javascript:;">售后服务</a> </div><div> <a href="javascript:;">客服邮箱</a> </div><div> <a href="javascript:;">投诉与建议</a> </div></div></li><li class="webnavdh" style="background:none"> <strong class="top_icon"><a href="javascript:;"> 网站导航 </a></strong><div class="top_hidebox"><ul class="dh-list"><li class="dh_title"> <a href="javascript:;"style="padding-left:0;">生鲜食品</a> <a href="javascript:;">酒水饮料</a> <a href="javascript:;">粮油副食</a> <a href="javascript:;">休闲食品</a> <a href="javascript:;">营养养生</a> </li><li class="line"></li><li class="dh_wenzi"><h4>饼干点心</h4><a class="dh_oneTle"href="javascript:;">服饰</a><s>|</s> <a href="javascript:;">图书</a><s>|</s> <a href="javascript:;">办公直通车</a><s>|</s> <a href="javascript:;">视频购物</a><s>|</s> <a href="javascript:;">品牌街</a><s>|</s> <a href="javascript:;">礼品卡</a><s>|</s> <a href="javascript:;">电子书</a><s>|</s> <a href="javascript:;">运动馆</a> </li><li class="line"></li><li class="dh_wenzi"><h4>冲调茶饮</h4><a class="dh_oneTle"href="javascript:;">商旅</a><s>|</s> <a href="javascript:;">保险</a><s>|</s> <a href="javascript:;">彩票</a><s>|</s> <a href="javascript:;">水电煤</a><s>|</s> <a href="javascript:;">游戏</a><s>|</s> <a href="javascript:;">PPTV下载</a> </li><li class="line"></li><li class="dh_wenzi"><h4>美食用品</h4><a class="dh_oneTle"href="javascript:;">应用商店</a><s>|</s> <a href="javascript:;">苏宁云</a><s>|</s> <a href="javascript:;">社区</a><s>|</s> <a href="javascript:;">客户端</a><s>|</s> <a href="javascript:;">对公销售</a><s>|</s> <a href="javascript:;">会员联盟</a><s>|</s> <a href="javascript:;">商家入驻</a> </li></ul></div></li></ul></div></div></div><div class="header"><div class="logo"> <img src="images/logogs.gif" width="260" height="75"/><div class="logo-text"><font>融创</font>旗下朔源产品在线商城</div></div><div class="processor" ><ol class="processorBox oh"><li class="current"><div class="step_inner fl"> <span class="icon_step">1</span><h4>我的购物车</h4></div></li><li><div class="step_inner"> <span class="icon_step">2</span><h4>确认订单信息</h4></div></li><li><div class="step_inner fr"> <span class="icon_step">3</span><h4>付款，完成购买</h4></div></li></ol><div class="step_line"></div></div></div></div><div class="cartShowline"></div><div class="jdCont"><div class="carTip"><div class="lt"><i></i><em>我的购物车</em></div><div class="cart_login">现在<a href="javascript:;">登录</a>，购物车中商品将被永久保存</div></div><script type="text/javascript">$(document).ready(function () {//jquery特效制作复选框全选反选取消(无插件)// 全选 $(".allselect").click(function () {$(".gwc_tb2 input[name=newslist]").each(function () {$(this).attr("checked", true);// $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });});GetCount();});//反选$("#invert").click(function () {$(".gwc_tb2 input[name=newslist]").each(function () {if ($(this).attr("checked")) {$(this).attr("checked", false);//$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });} else {$(this).attr("checked", true);//$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });} });GetCount();});//取消$("#cancel").click(function () {$(".gwc_tb2 input[name=newslist]").each(function () {$(this).attr("checked", false);// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });});GetCount();});// 所有复选(:checkbox)框点击事件$(".gwc_tb2 input[name=newslist]").click(function () {if ($(this).attr("checked")) {//$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });} else {// $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });}});// 输出$(".gwc_tb2 input[name=newslist]").click(function () {// $("#total2").html() = GetCount($(this));GetCount();//alert(conts);});});//******************function GetCount() {var conts = 0;var aa = 0;$(".gwc_tb2 input[name=newslist]").each(function () {if ($(this).attr("checked")) {for (var i = 0; i < $(this).length; i++) {conts += parseInt($(this).val());aa += 1;}}});$("#shuliang").text(aa);$("#zong1").html((conts).toFixed(2));$("#jz1").css("display", "none");$("#jz2").css("display", "block");}</script><div class="gwc groups_wrapper" style=" margin:auto;">  <script type="text/javascript">$(function () {var t = $("#text_box1");$("#min1").click(function () {t.val(parseInt(t.val()) - 1)setTotal(); GetCount();if(t.val()==1){$('.dis_min').attr('disabled','disabled');$('.dis_min').addClass('disabled');}else if (t.val()>=1){$('.dis_min').removeAttr('disabled');$('.dis_min').removeClass('disabled');}})$("#add1").click(function () {t.val(parseInt(t.val()) + 1)setTotal(); GetCount();if(t.val()==1){$('.dis_min').attr('disabled','disabled');$('.dis_min').addClass('disabled');}else if (t.val()>=1){$('.dis_min').removeAttr('disabled');$('.dis_min').removeClass('disabled');}})function setTotal() {$("#total1").html((parseInt(t.val()) * 9).toFixed(2));$("#newslist-1").val(parseInt(t.val()) * 9);}setTotal();})</script><table cellpadding="0" width="100%" cellspacing="0" class="gwc_tb2 order_contents"><tr><th class="cart_cx"style="width: 70px;"> <div class="pre_header"><input id="Checkbox1"type="checkbox" class="allselect inputComStyle"/><label class="label_style">全选</label></div></th><th class="cart_name">地友素品</th><th class="cart_price">单价</th><th class="cart_amount">数量（件）</th><th class="cart_sum">小计（元）</th><th class="cart_operate">操作</th></tr><tr><td class=" cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td><td class="cart_name"><div class="cart_things"> <a class="cart_img"><img src="images/showCart1.jpg" width="60" height="60"/></a> <a class="cart_infro">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露600ml</a> </div></td><td class="cart_price">68.00</td><td class="cart_amount"><input id="min1" name="" class="cart_minus dis_min disabled" type="button" value="-"disabled/><input id="text_box1" name="" type="text" value="1" class="cart_mid"/><input id="add1"class="cart_minus" type="button" value="+" /></td><td class="cart_sum"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td><td class="cart_operate"><a href="javascript:;" class="cart_remove">删除</a></td></tr><tr><td class="cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td><td class="cart_name"><div class="cart_things"><a class="cart_img"><img src="images/showCart2.jpg" width="60" height="60"/></a><a class="cart_infro">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露600ml</a> </div></td><td class="cart_price">68.00</td><td class="cart_amount"><input id="min2" class="cart_minus dis_min2 disabled"type="button" value="-" disabled/><input id="text_box2" name="" type="text" value="1"class="cart_mid"/><input id="add2" name="" class="cart_minus"type="button" value="+" /></td><td class="cart_sum"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td><td class="cart_operate"><a href="javascript:;"class="cart_remove">删除</a></td></tr></table> <script type="text/javascript">$(function () {var t = $("#text_box2");$("#add2").click(function () {t.val(parseInt(t.val()) + 1)setTotal(); GetCount();if(t.val()==1){$('.dis_min2').attr('disabled','disabled');$('.dis_min2').addClass('disabled');}else if (t.val()>=1){$('.dis_min2').removeAttr('disabled');$('.dis_min2').removeClass('disabled');}})$("#min2").click(function () {t.val(parseInt(t.val()) - 1)setTotal(); GetCount();if(t.val()==1){$('.dis_min2').attr('disabled','disabled');$('.dis_min2').addClass('disabled');}else if (t.val()>=1){$('.dis_min2').removeAttr('disabled');$('.dis_min2').removeClass('disabled');}})function setTotal() {$("#total2").html((parseInt(t.val()) * 8).toFixed(2));$("#newslist-2").val(parseInt(t.val()) * 8);}setTotal();})$(function(){$('.cart_remove').click(function(){$(this).parent().parent().remove();})})</script>  <script type="text/javascript">$(function () {$(".quanxun").click(function () {setTotal();//alert($(lens[0]).text());});function setTotal() {var len = $(".tot");var num = 0;for (var i = 0; i < len.length; i++) {num = parseInt(num) + parseInt($(len[i]).text());}//alert(len.length);$("#zong1").text(parseInt(num).toFixed(2));$("#shuliang").text(len.length);}//setTotal();})</script><div class="option_account"><div class="l_btn"><div class="lr5" style="margin-left: 20px;"><input id="checkAll" class="allselect inputComStyle" type="checkbox"/><label class="label_style">全选</label></div><div class="lr5"><input id="invert" type="checkbox" class="inputComStyle"/><label class="label_style">反选</label> </div></div><div class="r_btn"> <span class="last_select">已选商品<label id="shuliang" class="select_data">0</label>件</span><div class="last_moy"><span class="fl"style="white-space:nowrap;">商品应付总额:</span><span class="m_num">￥</span><label id="zong1" class="m_num">0.00</label></div><div class="fl"> <span id="jz1" class="fl disbtn">结算</span><a href="#" style="display:none;"class="jz2 openlogin fl" id="jz2">结算</a> </div></div></div></div></div><div class="indexContFooter">  <div class="footer"><div class="foot-cont"><dl class="fore1"><dt><b></b><strong>购物指南</strong></dt><dd><div><a href="#">购物流程</a></div><div><a href="#">会员介绍</a></div><div><a href="#">团购/机票</a></div><div><a href="#">常见问题</a></div><div><a href="#">大家电</a></div><div><a href="#">联系客服</a></div></dd></dl><dl class="fore2"><dt><b></b><strong>配送方式</strong></dt><dd><div><a href="#">上门自提</a></div><div><a href="#">211限时达</a></div><div><a href="#">配送服务查询</a></div><div><a href="#">配送费收取标准</a></div><div><a href="#">海外配送</a></div></dd></dl><dl class="fore3"><dt><b></b><strong>支付方式</strong></dt><dd><div><a href="javascript:;">货到付款</a></div><div><a href="javascript:;" >在线支付</a></div><div><a href="javascript:;" >分期付款</a></div><div><a href="javascript:;" >邮局汇款</a></div><div><a href="javascript:;" >公司转账</a></div></dd></dl><dl class="fore4"><dt><b></b><strong>售后服务</strong></dt><dd><div><a href="javascript:;" >售后政策</a></div><div><a href="javascript:;">价格保护</a></div><div><a href="javascript:;">退款说明</a></div><div><a href="javascript:;">返修/退换货</a></div><div><a href="javascript:;">取消订单</a></div></dd></dl></div><div class="footer_center"><div class="links"> <a href="javascript:;">关于我们</a>| <a href="javascript:;">联系我们</a>| <a href="javascript:;">友情链接</a>| <a href="javascript:;">免责条款</a>| <a href="javascript:;">广告服务</a>| <a href="javascript:;">食品流通许可证</a>| <a href="javascript:;">营业执照</a> </div></div><div class="footer_copyright"><p> Copyright © - 5RICE.吾米网版权所有黑ICP备11002788号保留一切权利。客服热线：400-400-5555 </p><p>京公网安备 110105001608 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515（1-1） | 营业执照</p></div><div class="footer_cx"><p> <a href="javascript:;"><img src="images/footerbomC.png" width="112"height="40"></a> <a href="javascript:;"><img src="images/footerbomX.gif" width="112"height="40"></a> </p></div></div></div></body></html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!

相关问题可以相互学习，可关注↓公Z号获取更多源码

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。