京东购物车（动态）网页搭建，利用JavaScript实现
时间:2022-07-22
本文章向大家介绍京东购物车（动态）网页搭建，利用JavaScript实现，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
需要实现的功能：
单选操作、全选操作、单行删除操作、多行删除操作、价格结算
使用的方式
JavaScript
项目环境
win10+Hbuilder+chrome浏览器
项目结构
项目效果
实现了所有功能的主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>进行价格计算</title>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
<!--使用JS别忘记将其引入-->
<script src="js/jd.js" type="text/javascript" charset="utf-8"></script>
</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>
<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 id="">配送至</span>
<select >
<option >埇桥区</option>
<option >灵璧县</option>
<option >砀山县</option>
<option >萧县</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始 -->
<!--warp令内容居中显示-->
<div class="tips warp">
<ui>
<li>
<input type="checkbox" name="fav" id="all" "checkTest1(this),checkTest2()"/>全选</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ui>
</div>
<!--显示菜单的结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" "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 "checkTest3(this,1),checkTest2()" >-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" "checkTest3(this,2),checkTest2()" >+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<!--通过href触发后面的JS代码，通过点击自身-->
<a href="javascript:void(0)" "checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" "checkTest2()" /> </li>
<li class="info_2"> <img src="img/img2.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 "checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" "checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<!--删除完毕，再进行一次判断-->
<a href="javascript:void(0)" "checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" "checkTest2()" /> </li>
<li class="info_2"> <img src="img/img3.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 "checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" "checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a href="javascript:void(0)" "checkTest4(this),checkTest2()" >删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算窗口开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li><input type="checkbox" name="fav" "checkTest1(this),checkTest2()" />全选</li>
<li>删除选中商品</li>
<li>移到我的关注</li>
<li>清除下柜商品</li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span id="snum">0</span>件商品</li>
<li>总价<span id="zongz">￥0</span></li>
<li class="butt">去结算</li>
</ul>
</div>
<!--结算窗口结束-->
</body>
</html>实现动态交互的JS代码
//获得所有多选框的对象
var fav=document.getElementsByName("fav");
//判断是否是全选操作
function checkTest1(th){
//判断选项是否被勾选
var flag=th.checked;
//alert(flag);
//通过forech的方法遍历名为fav的有序列表
for (var i in fav) {
fav[i].checked=flag;
}
}
//单选决定全选操作
function checkTest2(){
var flag=true;
/*遍历出去第一个和最后一个fav，后来再处理*/
for (var i=1;i<fav.length-1;i++) {
if (!fav[i].checked) {
flag=false;
break;
}
}
/*决定是否被勾选，fav[0]代表第一个全选框，fav[1]代表第二个多选框*/
fav[0].checked=flag;
fav[fav.length-1].checked=flag;
//alert(flag);
//商品的总价格
var zong=0;
//统计被勾选对象的数量
var num=0;
//统计商品数量
var spNum=0;
//价格是否统计,遍历第2、3、4个fav
for (var i=1;i<fav.length-1;i++) {
//如果被勾选
if (fav[i].checked) {
num++;
//获得ul父节点
var par =fav[i].parentNode.parentNode;
//获得指定ul下的所有li
var 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){
//就是th，即this传的值
var pre;
if (sig=="1") {
//获得下一个节点对象
pre=th.nextElementSibling;
if (Number(pre.value)>0) {
//获得节点的value的值
pre.value=Number(pre.value)-1;
}
}else{
//获得上个节点的对象
pre=th.previousElementSibling;
//获得下一个节点对象
pre.value=Number(pre.value)+1;
}
//计算每个商品的价格
//获取当前节点的父节点的上一个节点的内容，即每个商品的单价nnerTextinnerHTML都可以
var val=pre.parentNode.previousElementSibling.innerText;
//计算总价格
var zong=Number(val)*Number(pre.value);
//把总价赋值给指定对象
pre.parentNode.nextElementSibling.innerText="￥"+zong;
}
//删除指定节点
function checkTest4(th){
//获得父节点div(<a>的父节点（li）的父节点（ul）的父节点div)
var div=th.parentNode.parentNode.parentNode;
div.remove();
}相关css文件
jd.css
/*导航栏开始*/
.nav{
width:1920px ;
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: 20px;
}
.search img{
/*清除之前冲突样式 重点*/
clear: both;
float: left;
}
.search_div{
float: right;
margin-top: 20px;
}
.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;
}
/*border-top：加上边框加*/
.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_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 li,.balance_ul2 li{
float: left;
line-height: 50px;
margin-left: 14px;
}
.balance_ul2{
float: right;
}
.butt{
width: 110px;
height: 50px;
background-color: #C91623;
border: 0px;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
.balance_ul2 span{
font-size:20px ;
font-weight: bold;
color: #C91623;
}
/*结算窗口结束*/reset.css 统一控制页面格式的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;}源代码已分享至本人云盘~~~ 链接：https://pan.baidu.com/s/1ul_DbL2KVdETTc6himvfUA 提取码：7wbw
- Angularjs基础(七)
- WordPress 中八个有用的代码片段
- 【释疑文】DeveMobile、EaseMobile 及Devework 主题的区别
- DeveMobile/EaseMobile 主题双双更新1.1，增加离线存储，社交媒体关注等功能
- Angularjs基础(六)
- 如果机器人拥有痛觉，这个世界会怎样
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
- 专门攻击工资支付系统的网络犯罪
- Angularjs基础(五)
- DW Replace Open Sans：将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN
- Google Fonts 已可正常访问，相关插件可卸
- 微信支付宝完成这几个设置，别人偷不走你一毛钱！
- Angularjs基础(四)
- Google Fonts导致WordPress 速度问题的三个解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Activiti5工作流笔记二
- Activiti5工作流笔记三
- 短信验证码“最佳实践”
- 最近的项目系列1——core整合SPA
- 最近的项目系之2——core3.0整合Autofac
- 最近的项目系之3——core3.0整合Senparc
- 使用bat执行java项目
- Core + Vue 后台管理基础框架2——认证
- Core + Vue 后台管理基础框架3——后端授权
- Core + Vue 后台管理基础框架4——前端授权
- ent orm笔记4---Code Generation
- Core + Vue 后台管理基础框架5——系统审计
- Core + Vue 后台管理基础框架6——业务日志
- Lucene笔记一
- android9.0中SharedPreferences源码分析(一)