使用html css完成基本页面

html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/jd.css"/><!--添加矢量图标的css--><link rel="stylesheet" type="text/css" href="icon/iconfont.css"/><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><!--onelick--单击事件       checkTest1(this)的this相当于整个input框本身--><input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>全选</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" name="fav"  onclick="checkTest2()"/> </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 onclick="checkTest3(this,1),checkTest2()">-</button><input type="text" name="" id="" value="1" /><button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button></li><li class="info_7">￥182.5</li><li><a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox"  name="fav"  onclick="checkTest2()"/> </li><li class="info_2"> <img src="img/img2.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】畅销爆款笔记本电脑</a></li><li class="info_4"><a>颜色：灰色+红色</a> </li><li class="info_5">3298.0</li><li class="info_6"><button onclick="checkTest3(this,1),checkTest2()">-</button><input type="text" name="" id="" value="1" /><button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button></li><li class="info_7">￥3298.0</li><li><a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li><li class="info_2"> <img src="img/img3.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】洗护一体超洁洗衣液</a></li><li class="info_4"><a>种类：超洁/除菌/除味</a> </li><li class="info_5">30.5</li><li class="info_6"><button onclick="checkTest3(this,1),checkTest2()">-</button><input type="text" name="" id="" value="1" /><button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button></li><li class="info_7">￥30.5</li><li><a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /><a>已到我的关注</a></li></ul></div><!--商品详情展示结束--><!--结算开始--><div class="balance warp"><ul class="balance_ul1"><li><input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>全选</li><li><a>删除选中商品</a></li><li><a>移到我的关注</a></li><li><a>清除下柜商品</a></li></ul><ul class="balance_ul2"><li>已经选择<span id="snum">0</span>件商品</li><li>总价 <span id="zongz">￥0</span></li><li><button class="butt">去结算</button></li></ul></div><!--结算结束--></body>
</html>

css:
reset.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{  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标签进行操作*/
.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; /*div顶部的调整*/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*/
.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_ul2 span{ font-size: 25px;color: #C91623 ;font-weight: bold;
}/*结算模块结束*/

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{  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标签进行操作*/
.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; /*div顶部的调整*/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*/
.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_ul2 span{ font-size: 25px;color: #C91623 ;font-weight: bold;
}/*结算模块结束*/

完成效果：

静态页面搭建完成

使用js完成动态效果

我们使用js完成动态效果：
一引入js文件

<!--添加js文件--><script src="jq/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="js/jd.js"></script>

二编写js文件–jd.js:


//获得所有多选框的对象
var fav = document.getElementsByName("fav");//判断是否全选
function checkTest1(th){//是否勾选var flag = th.checked;//将所有多选框的对象的值和flag的值设为一样的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++;//获得li的父节点ul的父节点divvar par = fav[i].parentNode.parentNode;//获得指定ul下的所有livar li = par.getElementsByTagName("li");//单个商品的总价格 -- split()截取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; //将pre.value的值转为number类型再判断if(Number(pre.value)>0){//获得节点的value值pre.value = Number(pre.value)-1;}}else{//获得上一个节点对象pre = th.previousElementSibling;//获得节点的value值pre.value = Number(pre.value)+1; } //计算每一个商品的总价//先获得每一个商品的单价 -- 获得父节点（parentNode）的上一个节点（previousElementSibling）的text值var val = pre.parentNode.previousElementSibling.innerHTML;//计算总的价格var zong = Number(val)*Number(pre.value);//将总的价格赋值给我们指定的对象pre.parentNode.nextElementSibling.innerHTML ="￥"+ zong;}//删除指定的节点
function checkTest4(th){//获得a的父节点li的父节点ul的父节点divvar div = th.parentNode.parentNode.parentNode;//将div移除div.remove();
}

完成效果：

使用jquery完成动态效果

我们在原来的基本页面上，添加jquery代码

 <!--添加jquery文件--><script src="jq/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="jq/jd2.js"></script>

完成jd2.js文件，也就是jquery文件

function checkTest1(obj) {var fav = $("input[name=fav]");var flag = obj.checked;for (var i = 0; i < fav.length; i++) {fav.eq(i).prop("checked", flag);}
}
function checkTest2() {//先判断当所有商品被选中时，自动勾选全选，否则不勾选全选var fav = $("input[name=fav]");//设置boolean变量，默认值为true，为设置全选框的选中事件var flag = true;//获取除全选以外的选择框，当这些选择框有未被选中时，返回false，并break结束循环for (var i = 1; i < fav.length - 1; i++) {if (!fav.eq(i).prop("checked")) {flag = false;break;}}fav[0].checked = flag;fav[fav.length - 1].checked = flag;//判断是否有勾选的对象，因为当没有勾选对象时，会自动保留上一次操作的结果，从而导致总价与总数量无法归零var num = 0;//总价var sum = 0;//总数量var spNum = 0;//接着获取商品数量和商品小计//首先先判断商品有没有被勾选for (var i = 1; i < fav.length; i++) {//商品有勾选的情况if (fav.eq(i).prop("checked")) {num++;//想办法获取到数量和小计所在的节点，注意要根据索引i判断是哪个商品//获取ul节点var ul = fav.eq(i).parent().parent();//获取ul下的所有li节点var li = ul.children();//获取第6个li节点下的第二个子元素,得到商品数量，并根据选中的商品，对商品数量进行累加var spNum1 = li.eq(5).find("input");spNum += Number(spNum1.eq(0).val());//获取第7个li节点，得到商品小计，并对其进行￥符号分割处理，注意，这里要使用innerText获取值，否则获取不到var totalPrice = Number(li.eq(6).html().split("￥")[1]);//对商品总价进行累加sum += totalPrice;//当得到商品总数量及商品总价后，就要寻找商品总数量及商品总价对应的节点，改变其值$("#zongz").html("￥" + sum);$("#snum").html(spNum);}}//如果num为0，证明没有商品被选中,用于当用户取消选中按钮时对原有数据进行清除if (num == 0) {$("#zongz").html("￥" + 0);$("#snum").html(0);}
}function checkTest3(obj, num) {//获取单价节点的值var price = $(obj).parent().prev().html();//小计节点var TotalPrice = $(obj).parent().next();//接收数量var n;//减if (num == "1") {//获取其下一个节点n = $(obj).next();if (n.val() != "0") {n.val(Number(n.val()) - 1);}} //加else if (num == "2") {n = $(obj).prev();n.val(Number(n.val()) + 1);}TotalPrice.html("￥" + (Number(n.val()) * Number(price)));
}//div移除
function checkTest4(obj) {var div = $(obj).parent().parent().parent();div.remove();
}

完成效果：

这样，js和jquery都可以完成对于购物车动态的效果

使用js jquery去搭建完成京东购物车相关推荐

两周的时间教会我，要低头做人（jQuery实现京东购物车）
漫长的两周从HTML到css再到JavaScript最后jQuery:从刚开始的欢喜,激动,兴奋: 到最后的抓狂!本以为前段很简单,那全是扯淡:真的不容易! 废话不多说了今天最后一份,京东购物车的实现 ...
京东购物车网页(静态)搭建
按照报告的形式写一个项目一.项目名称完成京东购物车网页搭建二.项目环境 1.软件环境:Win10+HBuilder+Chrome浏览器 2.项目思路 : 根据需要实现的效果,自上而下,依次实现导 ...
基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
京东购物车（html+css+js）
效果图展示 html+js部分关于购物车实现的功能 1.仿京东购物车页面效果实现 2.购物车已有商品展示 3.数量增减 4.小计 5.汇总 6.全选 7.全选并汇总 8.单个商品复选 9.单个商品复 ...
HTML+CSS+JS实操京东购物车
京东购物车 HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
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 ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
JavaScript实现京东购物车页基础面效果
JavaScript实现京东购物车页基础面效果 HTML文件 <!DOCTYPE html> <html><head><meta charset=" ...
用node.js和express.js和jade搭建轻型cms系统
http://cnodejs.org/topic/4f16442ccae1f4aa270010bf 前言: 我们主要做的是iphone/ipad程序,但关注node.js很久,因为我们多少总是要做网站 ...

使用js jquery去搭建完成京东购物车

使用js jquery去搭建完成京东购物车

使用html css完成基本页面

使用js完成动态效果

使用jquery完成动态效果

使用js jquery去搭建完成京东购物车相关推荐

最新文章

热门文章