电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面

首先我们做的京东购物车的案例

首先使用css和html创建静态页面代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jd 购物车</title><link rel="stylesheet" type="text/css" href="../css/guifan.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="jss.js"></script></head><body><!--导航开始--><div class="nva"><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="ssearch_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" name="inname" onclick="oncktest1(this)"/> 全选</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="inname" onclick="oncktest2()"/></li><li class="info_2"><img src="../img/img2.jpg" width="80px" /></li><li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a href="">          电脑</a></li>  <br /><li class="info_5">￥159.99</li><li class="info_6"><button  onclick="oncktest3(this,1),oncktest2()">-</button><input type="text" name="" id="iname" value="1" /><button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button></li><li class="info_7">￥182.5</li><li><a onclick="sancu(this)">删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="inname" onclick="oncktest2()"/></li><li class="info_2"><img src="../img/img3.jpg" width="80px" /></li><li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a href="">         洗衣液</a></li><li class="info_5">￥159.99</li><li class="info_6"><button onclick="oncktest3(this,1),oncktest2()">-</button><input type="text" name="" id="iname" value="1" /><button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button></li><li class="info_7">￥190</li><li><a onclick="sancu(this)">删除</a><br /><a>已到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="inname" onclick="oncktest2()"/></li><li class="info_2"><img src="../img/img1.jpg" width="80px" /></li><li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a href="">颜色：灰色+粉红</a></li><li class="info_5">￥159.99</li><li class="info_6"><button onclick="oncktest3(this,1),oncktest2()    ">-</button><input type="text" name="" id="iname" value="1" /><button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button></li><li class="info_7">￥200</li><li><a onclick="sancu(this)">删除</a><br /><a>已到我的关注</a></li></ul></div><!--结算开始--><div class="balance warp"><ul class="balance_ul1"><li><input type="checkbox" name="inname" id="" value="" onclick="oncktest1(this)"/> 全选</li><li><a>删除选中商品</a></li><li><a>移到我的关注</a></li><li><a>清除下柜商品</a></li></ul><ul class="balance_ul2"><li>已经选择<span id="qqq" onclick="oncktest2()">0</span>件商品</li><li>总价 <span id="ppp" onclick="oncktest2()">￥0</span></li><li><button class="butt">去结算</button></li></ul></div><!--结算结束--></body></html>

需要引入的css文件

.nva {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;
}.nva a:hover {color: red;
}/*搜索框开始*/.search {margin-top: 20px;
}.search img {/*清除之前的样式*/clear: both;float: left;
}.search_div {float: right;margin-top: 25px;
}.ssearch_text {width: 265px;height: 21px;/*加边框边框3px边框颜色红色*/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: 24px;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 a:hover {color: red;
}.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;
}/*结算模块结束*/

静态页面的效果图

我们要实现的效果是需要点击全选下边单选框也会跟着有对勾

和点击数量加号减号数量会有相应的变化和总计的值都会变化

还有删除的效果

代码如下

实现全选

1. 要给第一个全选和末尾全选添加onclick单点事件点击全选可以自动选择元素中的√

2. 判断是否需要全选操作需要传当时状态的参数然后使用checked方法判断返回的是真或假

3. 然后在获取需要全选的子节点多选框使用document下的getelementsbyName()方法获取获取的是多个值是通过节点name属性获取的多选框name值可以一样

4. 获取完赋值到一个集合中用x代替

5. 然后遍历这个集合获取每个节点多选框

6. 使用增强for循环 for（var 遍历出的每一个多选框 in x ）

遍历出的每一个多选框根据全选的真或假进行赋值如果全选是真赋值true 否falss

var arr = document.getElementsByName("inname");function oncktest1(th) {//判断是否已经全选var flag = th.checked;//获取所有的单选节点框  for (var i in arr) {arr[i].checked = flag;}
}
//单选框点击决定全选

实现点击单选 完成全选

1. 给每一个多选框元素添加单击事件

2. 然后编写事件方法

3. 首先获取所有的单选框的不包括全选框上边通过3方法已经获取到所有的选择框了

然后需要遍历出单选框的话因为两个全选框第一个个最后一个所以遍历出单选时候

下标从1开始到length-1 结束可以刷到全选框只获取单选

4. 遍历所有单选判断是否都是为true 如果有一个不为true 直接break

5. 然后声明一个变量flag=true 如果遍历完都为真则不回改变flag的值如果有一个单选框是falss 则 flag 就是falss 然后吧flag的值赋给两个全选框

function oncktest2() {//声明flag为真var flag = true;//获取单选框的元素for (var i = 1; i < arr.length - 1; i++) {if (!arr[i].checked) {flag = false;break;}}//当全部都单选都选择时候 全选为truearr[0].checked = flag;arr[arr.length - 1].checked = flag;var zong = 0;var numa = 0;var spnum = 0;//   判断单选择有没有被统计for (var i = 1; i < arr.length - 1; i++) {if (arr[i].checked) {numa++;//获取父节点父节点var par = arr[i].parentNode.parentNode;var lis = par.getElementsByTagName("li");var z = lis[6].innerText.split("￥")[1];var w = lis[5].getElementsByTagName("input");var num1 = w[0].value;spnum += Number(num1);//           得到所有商品的总计zong += Number(z);//         获取商品总计的统计对象document.getElementById("ppp").innerText = zong;//            获取所有商品的数量对象document.getElementById("qqq").innerText = spnum;}}if (numa == 0) {document.getElementById("ppp").innerText = 0;document.getElementById("qqq").innerText = 0;}}

实现 button 按钮增加数量

1. 首先需要在button元素添加一个单击事件因为button元素有多个所以添加事件和方法时候需要指定当前this然后编写事件的方法

2. 操作谁就先获取谁因为操作的值当前节点的上一个节点所以需要获取上一个节点对象通过方法传值当前的.previousElcmcnSibling() 获取上一个节点的对象方法中可以传递多个值（当前节点对象，传的值是区分当前节点的那个button）

3. 获取到节点对象和当前那个botton传来值后我们可以使用if判断如果botton是加就通过获取的上一个节点对象的修改该对象的value值增或减

4. 因为获取到节点对象value是字符串类似所以需要通过number（）做强转

5. 因为使用使用场景要求数量小于零的话不和规范所以需要在 botton是减的方法里边加上判断如果value大于零的情况下开可以减否则减不了

//实现点击加减按钮改变总计值
function oncktest3(th, age) {//获取上一个节点的对象var pre;//获取value的值//减的判断if (age == 1) {pre = th.nextElementSibling;if (pre.value > 0) {pre.value = Number(pre.value) - 1;}}//加的判断if (age == 2) {pre = th.previousElementSibling;pre.value = Number(pre.value) + 1;}//根据增加修改总计//获取父节点上一个节点的值var pps = pre.parentNode.previousElementSibling.innerHTML.substr(1);//总的值等于var zong = Number(pps) * Number(pre.value);pre.parentNode.nextElementSibling.innerHTML = "￥" + zong;
}function sancu(th){var divv=th.parentNode.parentNode.parentNode;divv.remove();}

实现通过增减改变总价

1. 获取需要修改的节点对象和属性值改变总价需要知道当前节点值×父节点的上一个节点的值去修改父节点下一个节点的值。

2. 获取父节点上一个节点的方法是parentNode.previoussElementSibling.innerHTML直接获取上一个节点文本值

获取父节点下一个节点的方法是parentNode.nextElementSibling.innerHTML 需要把总的积赋值到这节点

选择价格统计

1. 首先判断单选有没有被选择统计

2. 遍历所有的选项框不包括全选的框

3. 然后添加if判断如果单选选中需要去统计父节点的父节点的子节点文本值

获取父节点的父节点的方法 pre=arr[i].prentNode.prentNode；pre.getelementsByTagName(“标签名”)这样可以获取到商品的总价格ul下的第6个li标签

然后通过li[6].innertext. Split（“￥“）[1] 返回值就是单。商品的总价

获取所有的商品的总计 zong+=number（单个商品的总计）强转

4. 然后获取所有商品的总价格 document.getElementById(id名字).innerText=zong

5. 然后需要加一个if判断如果单选都没有选择的话总计=0；怎么判断有没有单选被选择呢声明一个变量num=0 在if中写上num++ 然后判断num的值就知道有有沟上了

6. 然后需要获取商品的数量通过li[5].getElementsElcecntsByTagName(input类型)返回的是一个元素的数组得到input标签然后需要得到input标签里的value值同下标【0】.value得到单商品的数量

7. 然后获取所有的商品数量声明spnum=0 ；然后把每一个商品的数据加等于给spnum得到所有数量

8. 然后获取商品数量的统计对象document.getElementById(商品数量名字).innertext=spnum

如果统计没有商品数量 spnum=0；

删除节点

1. 给删除节点添加单击事件删除需要事件方法需要传当前this

2. 事件方法

3.因为删除是整个div的标签所有直接获取div的节点当前节点是是li下的a标签所有获取的话需要parentNode.parentNode.parentNode；得到div节点然后div.remove 就可以删除了

电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面相关推荐

电脑端京东的我的订单html+css页面_互联网系统架构前后端分离技术体系
点击「京东数科技术说」可快速关注「摘要」随着互联网技术的发展以及终端设备的不断增多,前后端分离技术已成为移动互联网领域不可或缺的技术.前后端分离技术的不断完善,让前后端的分工与系统边界划分越来越清晰 ...
电脑端京东的我的订单html+css页面_什么是前端和后端开发？写给即将迈入前端开发领域的朋友...
引言不太清楚前端和后端是什么意思? 您是否想学习更多关于编程技术的知识,但又不确定从哪里开始?一个好的开始是了解前端开发和后端开发之间的区别. 一些专业的技术术语可能会令人困惑. 但请不用担心,我们 ...
ThinkPHP 5.1的商城系统，商淘软件多用户商城电脑端+手机版，破解版
ThinkPHP 5.1的商城系统,多用户商城电脑端+手机版,破解出来了!!大家可以下载学习使用. 看到目前唯一支持商城和社区用户互通的挺好的了,分享给大家. 商淘软件电商系统功能(含手机版) (一) ...
ERP进销存软件系统电脑端手机端小程序通用 (教程)
ERP(Enterprise Resource Planning)即企业资源计划可以电脑端手机端小程序数据同步多账户使用 ERP进销存软件系统试用网址 https://erp.77 ...
精心分享7个小巧却强大的电脑端小软件，让人大开眼界！
分享7个小巧却强大的电脑端小软件 1.PotPlayer PotPlayer是一款非常强大的PC端播放器软件,支持多种媒体格式,启动速度极快,播放稳定,还支持给视频加字幕,设置个性皮肤等. Potpl ...
同一个网站，手机端跟电脑端显示不同是怎么实现的？...
同一个网站,手机端跟电脑端不同是怎么实现的? 常见的方式有三种: 1,自适应网站同一套代码,自动实现手机端和电脑端的布局自动调整.例如:openGPS.cn 网站现在大部分页面已经支持自适应展示,手 ...
微信电脑客户端登陆_电脑端微信多开教程，多个微信同时登陆，工作生活两不误...
微信已经成为我们生活中不可缺少的一个社交软件,无论是生活还是工作都会用到. 它可以跨平台使用,电脑端,网页端,手机端都可以使用,很多人都会在电脑上面安装一个微信,因为电脑端打字速度快,便于沟通聊天. ...
查看计算机用户创建时间,敬业签在电脑端怎样查看团签内容的创建时间？
原标题:敬业签在电脑端怎样查看团签内容的创建时间? 敬业签是一款功能强.易操作的云便签软件,因为它除了支持多端云同步(Windows/Android/ios/Web/mac等)的功能外,还兼具个人便签 ...
pc端汽车obd软件下载?_常用的ERP软件电脑端下载
(悟空CRM)客户管理模块:1.可以对客户进行新建.编辑.删除.查看.转移.锁定/解锁.放入公海操作:2.客户唯一性排重,默认录入时提示客户名称.手机号码重复:3.客户详情信息先可查看活动记录.基本信 ...

电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面

电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面相关推荐

最新文章

热门文章