當前位置：
首頁 >
JavaScript实现京东购物车页基础面效果
發布時間：2025/3/20
53
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现京东购物车页基础面效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript實現京東購物車頁基礎面效果
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 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="fav" onclick="checkTest1(this),checkTest2()"/></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><li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></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="checkTest3(this,1),checkTest2()">-</button></li><li class="info_7"><input type="text" value="1" /></li><li class="info_8"><button class="bu2" onclick="checkTest3(this),checkTest2()">+</button></li><li class="info_9"><b>￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">刪除</a><br />移入關注</li></ul></div><div class="info fir"><ul><li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></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="checkTest3(this,1),checkTest2()">-</button></li><li class="info_7"><input type="text" value="1" /></li><li class="info_8"><button class="bu2" onclick="checkTest3(this),checkTest2()">+</button></li><li class="info_9"><b>￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">刪除</a><br />移入關注</li></ul></div><div class="info fir"><ul><li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></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="checkTest3(this,1),checkTest2()">-</button></li><li class="info_7"><input type="text" value="1" /></li><li class="info_8"><button class="bu2" onclick="checkTest3(this),checkTest2()">+</button></li><li class="info_9"><b>￥1299.00</b></li><li class="info_10"><a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">刪除</a><br />移入關注</li></ul></div><!--商品展示欄結束--><!--結算欄開始--><div class="check fir"><ul class="check_ul1"><li><input type="checkbox" name="fav" onclick="checkTest1(this),checkTest2()"/></li><li>全選</li><li><a href="javascript:void(0)" onclick="checkTest5(),checkTest2()">刪除選中的商品</a></li><li><a href="">移入關注</a></li><li><a href=""><b>清理購物車</b></a></li></ul><ul class="check_ul2"><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>
JavaScript文件
//獲得所有多選框對象var fav = document.getElementsByName("fav");//判斷是否全選 function checkTest1(th){//判斷選中的對象是否被勾選var flag = th.checked;for(var i in fav){fav[i].checked = flag;}}//單選決定全選 function checkTest2(){var flag = true;for(var i=1;i<fav.length-1;i++){if(!fav[i].checked){flag = false;break;}}//決定框是否勾選fav[0].checked=flag;fav[fav.length-1].checked=flag;//商品的總價var zong = 0;//商品數量var shu = 0;for(var i=1;i<fav.length-1;i++){if(fav[i].checked){shu++;//獲得ul父節點var pre = fav[i].parentNode.parentNode;//獲得指定ul下所有的livar li = pre.getElementsByTagName("li");var ja = li[8].getElementsByTagName("b")[0];var z = ja.innerHTML.split("￥")[1];zong+=Number(z);//獲得總價document.getElementById("zongj").innerHTML=zong;}}if(shu==0){document.getElementById("zongj").innerHTML=0;}}//控制數量增加減少 function checkTest3(th,num){//獲得ul父節點var pre1 = th.parentNode.parentNode;//獲得指定ul下所有的livar li = pre1.getElementsByTagName("li");//獲得單價var dan = li[4].innerHTML.split("￥")[1];var ja = li[8].getElementsByTagName("b")[0];var pre;var gs;if(num==1){//獲取父節點的下一個節點；pre = th.parentNode.nextElementSibling;//獲取指定節點下的所有inputgs = pre.getElementsByTagName("input");if(gs[0].value>0){gs[0].value = Number(gs[0].value)-1;}ja.innerHTML = "￥"+Number(dan)*Number(gs[0].value)}else{pre = th.parentNode.previousElementSibling;gs = pre.getElementsByTagName("input");gs[0].value = Number(gs[0].value)+1;ja.innerHTML = "￥"+Number(dan)*Number(gs[0].value)}} function checkTest4(th){//獲得div父節點var div = th.parentNode.parentNode.parentNode;div.remove();}function checkTest5(){for(var i=1;i<fav.length-1;i++){if(fav[i].checked){//獲取父類divvar div = fav[i].parentNode.parentNode.parentNode;div.remove();}} }
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;} .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; } /*結算欄結束*/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;}本來想發張效果圖的，但是好像GIF格式的不支持；只能這樣了；
總結
以上是生活随笔為你收集整理的JavaScript实现京东购物车页基础面效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java面向对象知识汇总的思维导图
- 下一篇： SpringMVC环境配置全过程Inte