當前位置：
首頁 >
两周的时间教会我，要低头做人（jQuery实现京东购物车）
發布時間：2025/3/20
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
两周的时间教会我，要低头做人（jQuery实现京东购物车）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
漫長的兩周從HTML到css再到JavaScript最后jQuery；從剛開始的歡喜，激動，興奮；
到最后的抓狂！本以為前段很簡單，那全是扯淡；真的不容易！
廢話不多說了今天最后一份，京東購物車的實現；希望能幫到你！
HTML文件
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!--引入樣式--><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/jd.css"/><link rel="stylesheet" type="text/css" href="icon/iconfont.css"/><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="js/jd.js"></script></head><body ><!--導航欄開始--><div class="nav"><div class="fir"><ul class="nav_ul1"><li><i class="iconfont"></i><a href="https://global.jd.com/">京東首頁</a></li><li><i class="iconfont"></i><select><option>海外</option><option>港澳</option><option>大陸</option></select></li></ul><ul class="nav_ul2"><li><a href="https://order.jd.com/center/list.action">我的訂單</a></li><li><span>|</span><a href="https://home.jd.com/">我的京東</a></li><li><span>|</span><a href="https://vip.jd.com/">京東會員</a></li><li><span>|</span><a href="https://b.jd.com/">企業采購</a></li><li><span>|</span><select><option>客戶服務</option><option>客戶</option><option>商戶</option></select></li><li><span>|</span><select><option>網站導航</option><option>特殊主題</option><option>行業頻道</option><option>生活服務</option><option>更多精彩</option></select></li><li><span>|</span><a href="https://app.jd.com/">手機京東</a></li></ul></div></div><!--導航欄結束--><!--搜索框開始--><div class="search"><div class="fir"><img src="img/jdlogo-201708-@1x.png"/><div class="search_div"><input type="text" class="search_text"/><button class="search_bt">搜索</button></div></div> </div><!--搜索框結束--><!--標題欄開始--><div class="title fir"> <h3>全部商品</h3><div class="title_1"><i>配送至：</i><select><option>海外</option><option>大陸</option><option>港澳</option></select></div></div><!--標題欄結束--><!--顯示欄開始--><div class="typs fir"><ul><li><input type="checkbox" name="fav1" id="ches" /></li><li >全選</li><li >商品</li><li >單價</li><li >數量</li><li >小計</li><li >操作</li></ul></div><!--顯示欄結束--><!--空白開始--><div class="kb fir"></div><!--空白結束--><!--商品展示欄開始--><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手機</i>榮耀20青春版 </li><li class="info_4">冰島幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">刪除</a><br />移入關注</li></ul></div><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手機</i>榮耀20青春版 </li><li class="info_4">冰島幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">刪除</a><br />移入關注</li></ul></div><div class="info fir"><ul class="ul_1"><li class="info_1"><input type="checkbox" name="fav" "/></li><li class="info_2"><img src="img/0f96fe7f6a8596a0.jpg" width="100px"/></li><li class="info_3"><i class="info_i">京品手機</i>榮耀20青春版 </li><li class="info_4">冰島幻境</li><li class="info_5">￥1299.00</li><li class="info_6"><button class="bu1" onclick="zhongJia(),zengjian(this,1)">-</button></li><li class="info_7"><input type="text" class="hj" value="1" /></li><li class="info_8"><button class="bu2" onclick="zengjian(this,0),zhongJia()">+</button></li><li class="info_9"><b class="jia">￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this)">刪除</a><br />移入關注</li></ul></div><!--商品展示欄結束--><!--結算欄開始--><div class="check fir"><ul class="check_ul1"><li><input type="checkbox" name="fav1" id="ches1"/></li><li>全選</li><li><a href="javascript:void(0)" id="delsp" ">刪除選中的商品</a></li><li><a href="">移入關注</a></li><li><a href=""><b>清理購物車</b></a></li></ul><ul class="check_ul2"><li>已選擇<span id="zos">0</span>件商品</li><li class="zj1">總價：</li><li class="zj2" id="zongj">0</li><li><button><a href="">去結算</a></button></li></ul></div><!--結算欄結束--><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body> </html>
CSS文件
Jd.css
/*導航開始*/ .nav{height: 40px;background-color: #e3e4e5;}.fir{width: 1000px;margin: 0px auto;} .nav_ul1,{float: left;} .nav_ul1 li, .nav_ul2 li,.nav_ul2 span{float: left;margin-right: 15px;line-height: 40px;}.nav_ul1 a , .nav_ul2 a , .nav_ul2 span , .nav_ul2 select , .nav_ul1 select{color: gray;font-family: "黑體";font-size: 13px; }.nav_ul2 select , .nav_ul1 select{border: 0px;background-color: #e3e4e5;}.nav a:hover{color: red; } .nav_ul2{float: right; }/*導行結束*//*搜索框開始*/.search{margin: 35px; } .search img{float: left;} .search_div{float: right;margin-top: 8px; } .search_text{width: 336px;height: 23px;border: 3px solid #c91623;position: relative;left: 6px;} .search_bt{height: 31px;width: 51px;border: 0px;background-color: #c91623;color: #FFFFFF;}/*搜索框結束*/ /*標題欄開始*/.title{margin-top: 127px; } .title h3{float: left;color: #e2231a;font-size: 23px;} .title_1{float: right;} .title_1 select{width: 180px;border-color:gainsboro ; } /*標題欄計算*/ /*顯示欄開始*/ .typs{margin-top: 170px;height: 50px;background-color: #f3f3f3;} .typs li{float: left;line-height: 50px;font-size: 12px;font-family: "新宋體";} .typs input{margin-left: 10px; } .typs li:nth-child(2){margin-left: 8px; } .typs li:nth-child(3){margin-left: 100px; } .typs li:nth-child(4){margin-left: 384px; } .typs li:nth-child(5){margin-left: 100px; } .typs li:nth-child(6){margin-left: 130px; } .typs li:nth-child(7){margin-left:55px ; } /*顯示欄結束*/ /*空白開始*/ .kb{height: 45px;} /*空白結束*/ /*商品展示欄開始*/.info{height: 150px;background-color: #fff4e8;width: 1000px;border: 1px solid gainsboro; } .info li{float: left;margin-top:35px ; } .info_2{margin-left: 8px;} .info_1{margin-left: 4px; }.info_3{margin-left: 20px; } .info_i{background-color: red;color: white; } .info_4{margin-left: 20px; } .info_5{margin-left:165px ; } .info_6{margin-left: 60px;} .bu1{width: 24px; } .info_7 input{width: 20px;text-align: center; } .info_9 b{margin-left: 72px; } .info_10{margin-left: 20px; } /*商品展示欄結束*/ /*結算欄開始*/ .check{height: 50px;border: 1px solid gainsboro;margin-top: 20px;position: fixed;bottom: -1px;background: #e5e5e5;margin-left: 259px;} .check_ul1 li,.check_ul1,.check_ul2 li{float: left;line-height: 50px;} .check li:nth-child(3),.check li:nth-child(4),.check li:nth-child(5){margin-left: 12px; } .check_ul1 a:hover{color: red; } .check_ul1 i:nth-child(1){color: darkgrey;font-family: "黑體";font-size: 14px; } .check_ul1 a{color: darkgrey;font-family: "黑體";font-size: 14px; } .check_ul2{float: right; } .zj1{color: gray;font-family: "黑體";font-size: 13px; } .zj2{font-weight: bold;color: red;position: relative;left: -5px; } .check_ul2 button{background-color: #e64347;border: 0px;width: 100px;height: 50px;font-weight: bold;font-size: 20px;font-family: "黑體"; } .check_ul2 a{color: #FFFFFF; } .check_ul2 li:first-child{margin-left:-139px ; } .check_ul2 span{font-weight: bold;color: red;font-size: 20px;} /*結算欄結束*/Reset.css
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;} body{text-align: center;font-size:14px;} a{text-decoration: none;} li{list-style: none;}JavaScript文件
$(function(){//判斷是否全選$("#ches").click(function(){var flag = $(this).prop("checked");$("input[name=fav]").prop("checked",flag);$("#ches1").prop("checked",flag);zhongJia()})$("#ches1").click(function(){var flag = $(this).prop("checked");$("input[name=fav]").prop("checked",flag);$("#ches").prop("checked",flag);zhongJia()})//刪除所選項$("#delsp").click(function(){//獲取已被選中的項var del = $("input[name=fav]:checked");if(del.length==0){alert("至少選擇一行");}else{del.parent().parent().parent().remove();}zhongJia()})//判斷是否全選的操作$("input[name=fav]").click(function(){var flag = true;//獲得名字為fav的inputvar che = $("input[name=fav]");//遍歷che.each(function(){if(!$(this).prop("checked")){flag = false;return;}})//全選框是否勾選；$("#ches").prop("checked",flag);$("#ches1").prop("checked",flag);zhongJia();})})//計算總價以及總數的方法 function zhongJia(){//商品總價var zong = 0;//商品數量var zs = 0;var shu = 0;var che = $("input[name=fav]");che.each(function(){if($(this).prop("checked")){shu++;//獲得單個商品總價var dan = $(this).parent().parent().find(".jia").html().split("￥")[1];//獲得數量var sl = $(this).parent().parent().find(".hj").val();zong+=Number(dan);zs+=Number(sl);}$(".zj2").html("￥"+zong);$("#zos").html(zs);})if(shu==0){$(".zj2").html(0);$("#zos").html(0);}}//控制數量的增加與減少的方法 function zengjian(th,num){//獲得單價var dan = $(th).parent().parent().find(".info_5").html().split("￥")[1];//獲得單個商品總價var danz = $(th).parent().parent().find(".jia");//獲得數量var sl = $(th).parent().parent().find(".hj");var zsl = Number(sl.val())+1;var jsl = Number(sl.val())-1; if(num==1){if(sl.val()>0){sl.val(jsl);}danz.html("￥"+dan*sl.val());}else{sl.val(zsl);danz.html("￥"+dan*sl.val());}}//刪除方法 function checkTest4(th){//獲得div父節點var div = $(th).parent().parent().parent();div.remove();zhongJia()}
最后在這里真心說一句，做什么都不容易；
但加油堅持，怎么都會有自己一批天地；
獻給所有正在奮斗的人們；
總結
以上是生活随笔為你收集整理的两周的时间教会我，要低头做人（jQuery实现京东购物车）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最简单实现多线程的方法（Thread)
- 下一篇： 网络协议知识总结