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实现京东购物车页基础面效果相关推荐

运用 HTML+Css+JavaScript 实现京东购物车
目录 1,语言 2.功能 3.代码 3.1HTML代码 3.2 CSS 3.3 JavaScript 4.录屏展示 5.总结 1,语言 HTML+Css+JavaScript 2.功能单选与全选 ...
js--模拟京东详情页图片放大效果
效果: html: <div class="preview_img"><img src="upload/s3.png" alt="& ...
JavaScript实现京东秒杀效果
这篇文章主要为大家详细介绍了JavaScript实现京东秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaScript实现京东秒杀效果 ...
Html、Css、javaScript 网页制作之京东购物车
一.Html: 京东购物车.html: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
JavaScript在HTML中的基础用法总结
网页主要由三部分组成,分别为HTML.CSS和Javascript.如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂.因此,三者的联系与融合则至关重要.本文就来为大家讲解一下Java ...
JavaScript面试题大全之基础面试题（附答案）
近年来,从事web前端开发的程序员越来越多,都需要使用JavaScript,这篇文章主要整理一些最常见的JavaScript面试题以及答案. 介绍JavaScript的数据类型值类型(基本类型):字 ...
京东购物车网页(静态)搭建
按照报告的形式写一个项目一.项目名称完成京东购物车网页搭建二.项目环境 1.软件环境:Win10+HBuilder+Chrome浏览器 2.项目思路 : 根据需要实现的效果,自上而下,依次实现导 ...
京东购物车（html+css+js）
效果图展示 html+js部分关于购物车实现的功能 1.仿京东购物车页面效果实现 2.购物车已有商品展示 3.数量增减 4.小计 5.汇总 6.全选 7.全选并汇总 8.单个商品复选 9.单个商品复 ...

JavaScript实现京东购物车页基础面效果

JavaScript实现京东购物车页基础面效果

JavaScript实现京东购物车页基础面效果相关推荐

最新文章

热门文章