HTML+CSS+JS仿京东购物车页面动态效果

1 用到的知识

1.1 js选择器

1.2 循环语句

1.3 文档修改语句

1.4 模块移除属性

2 HTML代码

3 CSS代码

3.1 预处理css

3.2 jd购物车页面的css

4 jd购物车页面的js

5 效果展示

1 用到的知识

前面静态页面知识：HTML+CSS仿京东购物车页面静态页面

1.1 js选择器

var fav=document.getElementsByName("fav");

1.2 循环语句

for(var i in fav){

       fav[i].checked=flag;

       }

1.3 文档修改语句

document.getElementById("zongz").innerText=0;

1.4 模块移除属性

div.remove();

2 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"/></head><body><!--导航开始--><div class="nav"><div class="warp"><ul class="nav_ul1"><li><a href=""><i class="iconfont"></i> 京东首页</a></li><li><a href="">配送到：北京</a></li></ul><ul class="nav_ul2"><li><a href="">洋洋宝贝</a><span>|</span></li><li><a href="">我的订单</a><span>|</span></li><li><a href="">我的京东</a><span>|</span></li><li><a href="">京东会员</a><span>|</span></li><li><a href="">企业采购</a><span>|</span></li><li><a href="">京东手机</a><span>|</span></li><li><a href="">关注京东</a><span>|</span></li><li><a href="">客户服务</a><span>|</span></li><li><a href="">网站导航</a></li></ul></div></div><!--导航结束--><!--搜索框开始--><div class="search"><div class="warp"><img src="img/logo.jpg" /><div class="search_div"><input type="text" class="search_text" /><input type="button" value="搜索"  class="search_but"/></div></div></div><!--搜索框结束--><!--标题开始--><div class="title warp"><h3>全部商品</h3><div><span>配送到</span><select><option>昌平区</option><option>顺义区</option><option>大兴区</option><option>朝阳区</option><option>昌平区</option></select></div></div><!--标题结束--><!--显示菜单的开始--><div class="tips warp"><ul><li><input type="checkbox" />全选</li><li>商品</li><li>单价</li><li>数量</li><li>小计</li><li>操作</li></ul></div><!--显示菜单的结束--><!--商品详情展示开始--><div class="info warp"><ul><li class="info_1"><input type="checkbox" /> </li><li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a>颜色：灰色+粉红</a> </li><li class="info_5">￥182.5</li><li class="info_6"><button>-</button><input type="text" name="" id="" value="1" /><button class="bot">+</button></li><li class="info_7">￥182.5</li><li><a>删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" /> </li><li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a>颜色：灰色+粉红</a> </li><li class="info_5">￥182.5</li><li class="info_6"><button>-</button><input type="text" name="" id="" value="1" /><button class="bot">+</button></li><li class="info_7">￥182.5</li><li><a>删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" /> </li><li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a>颜色：灰色+粉红</a> </li><li class="info_5">￥182.5</li><li class="info_6"><button>-</button><input type="text" name="" id="" value="1" /><button class="bot">+</button></li><li class="info_7">￥182.5</li><li><a>删除</a><br /><a>已到我的关注</a></li></ul></div><!--商品详情展示结束--><!--结算开始--><div class="balance warp"><ul class="balance_ul1"><li><input type="checkbox" name="" id="" value="" />全选</li><li><a>删除选中商品</a></li><li><a>移到我的关注</a></li><li><a>清除下柜商品</a></li></ul><ul class="balance_ul2"><li>已经选择<span>1</span>件商品</li><li>总价 <span>￥12</span></li><li><button class="butt">去结算</button></li></ul></div><!--结算结束--></body>
</html>

3 CSS代码

3.1 预处理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;}

3.2 jd购物车页面的css

.nav{height: 30px;background-color: #f1f1f1;}.warp{width: 1000px;margin: 0px auto;}.nav_ul1,.nav_ul2 li{float: left;}.nav_ul1 li{float: left;line-height: 30px;margin-right: 20px;
}.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{font-size: 12px;color: gray;}.nav_ul2{float: right;}
.nav_ul2 li,.nav_ul2 span{line-height: 30px;margin-left: 15px;}
.nav a:hover{color: red;}/*搜索框开始*/.search{margin-top: 20px;}.search img{/*清除之前的样式*/clear: both;float: left;}.search_div{float: right;margin-top: 25px;}
.search_text{width: 265px;height: 21px;border: 3px solid #c91623;position: relative;left: 4px;top: -1px;
}.search_but{width: 51px;height: 29px;background-color: #c91623;border: 0px;color: #FFFFFF;}/*搜索框结束*//*标题开始*/
.title{margin-top: 130px;}.title h3{float: left;font-size: 23px;color:#c91623 ;
}.title div{float: right;font-size: 14px;color:gray ;
}
/*标题结束*//*显示菜单的开始*/
.tips{width: 1000px;height: 50px;background-color: #f1f1f1;margin-top: 165px;border: 1px  solid  #e9e9e9;}.tips li{float: left;line-height: 50px;font-size: 12px;color: gray;}.tips li:nth-child(1){width: 90px; border-top: 3px solid #c91623 ;}.tips li:nth-child(2){margin-left: 80px;}.tips li:nth-child(3){margin-left: 430px;}.tips li:nth-child(4){margin-left: 70px;}.tips li:nth-child(5){margin-left: 110px;}.tips li:nth-child(6){margin-left: 50px;}/*显示菜单的结束*//*商品详情展示开始*/
.info{width: 1000px;height: 125px;background-color: #fff4e8;border: 1px  solid gray;margin-top: 30px;border-top: 3px solid  gray;
}.info li{float:  left; margin-top: 20px;
}
.info a{font-size: 12px;color: #333333;}
.info_1{margin-left: 23px;}
.info_2{margin-left: 15px;border: 1px  solid gray;}
.info_3{width: 270px;height: 20px;}.info_4{margin-left: 45px;}
.info_5{margin-left: 70px;}
.info_6{margin-left: 40px;
}
.info_6 input{width: 30px;height: 12px;text-align: center;position: relative;top: -2px;left: -5px;}.info_6 button{width: 30px;height: 18px;
}
.bot{position: relative;left: -10px;
}
.info_7{margin-left: 40px;
}/*商品详情展示结束*//*结算模块开始*/.balance{width: 1000px;height: 50px;border: 1px  solid  gray;margin-top: 30px;}.balance_ul1,.balance_ul1>li,.balance_ul2>li{float: left;line-height: 50px;margin-left: 14px;}
.balance_ul2{float: right;
}.butt{width: 100px;height: 50px;background-color: #C91623;border: 0px;color: #FFFFFF;font-size: 20px;font-weight: bold;}.balance span{font-size: 25px;color: #C91623 ;font-weight: bold;
}/*结算模块结束*/

4 jd购物车页面的js

//获得所有的多选框对象
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 num=0;//统计商品的数量var spNum=0;for(var i=1;i<fav.length-1;i++){if(fav[i].checked){num++;//获得ul父节点var par=fav[i].parentNode.parentNode;//获得指定ul下面的所有的livar li= par.getElementsByTagName("li");//单个商品的总价格var z=li[6].innerText.split("￥")[1];//获得所有商品的总价格zong+=Number(z);document.getElementById("zongz").innerText=zong;//获得商品的数量var z2=li[5].getElementsByTagName("input");var  num2=z2[0].value;spNum+=Number(num2);//获得商品数量统计的对象document.getElementById("snum").innerText=spNum;}}if(num==0){document.getElementById("zongz").innerText=0;document.getElementById("snum").innerText=0;}}//控制数量的增加和减少
function  checkTest3(th,sig){var pre;if(sig=="1"){//获得下一个节点pre=th.nextElementSibling;  if(Number(pre.value)>0){//获得节点的value值pre.value=Number(pre.value)-1;}}else {//获得上一个节点对象pre=th.previousElementSibling;//获得节点的value值pre.value=Number(pre.value)+1;}//计算每一个商品总的价格//获得每一个商品的单价var val=pre.parentNode.previousElementSibling.innerHTML;//计算总的价格var zong =Number(val)*Number(pre.value);//把总的价格赋值给指定的对象pre.parentNode.nextElementSibling.innerHTML="￥"+zong;}//删除指定的节点
function  checkTest4(th){//获得父节点divvar div=th.parentNode.parentNode.parentNode;div.remove();}

5 效果展示

HTML+CSS+JS仿京东购物车页面动态效果相关推荐

京东购物车html页面,仿京东购物车页面
[实例简介] 仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面 [实例截图] [核心代码] 仿京东 └── 仿京东 ├── css │ ├── im ...
HTML+CSS仿京东购物车页面静态页面
目录 1 用到的知识 1.1 无序标签的使用 1.2 浮动的使用 1.3 伪类的使用 1.4 清除原有浮动所占位置 1.5 边框背景盒子布局div文字属性等等 2 HTML代码 3 CSS代码 3.1 ...
HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
web前端html+css+js仿京东商城/天猫/电商平台❤功能齐全(大学毕业设计论文) 仿京东/天猫/苏苏/鞋服商城/服装商城/古装商城/商城首页/商城html/商城模板/商城购物/中文电商/商城h ...
商品浏览时的css,jquery仿京东商品放大浏览页面
jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面css的代码!!! *{ margin: 0 ...
HTML京东商品页面代码,jquery仿京东商品页面代码分享
jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面的效果!!! 仿京东商品页面css的代码!! ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
基于html+css+js+jquery的购物页面设计
1.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布.jQue ...
Android中实现简单的仿京东详情页面
前言: 之前做过一个商城项目,实现了类似京东的详情页,采用Coordinatorlatout+Appbarlayout+toolbar实现,实现的效果主要是沉浸式状态栏和标题栏,当图片滑动时标题栏和按 ...

HTML+CSS+JS仿京东购物车页面动态效果

1 用到的知识

1.1 js选择器

1.2 循环语句

1.3 文档修改语句

1.4 模块移除属性

2 HTML代码

3 CSS代码

3.1 预处理css

3.2 jd购物车页面的css

4 jd购物车页面的js

5 效果展示

HTML+CSS+JS仿京东购物车页面动态效果相关推荐

最新文章

热门文章