实现购物车的思路
/*
* 制作购物车的思路：
* 1、页面的样式布局
* 2、了解购物车中有哪些功能
* 3、分别实现功能
* 3-1、总计，打开页面是需要，增加和删除商品时需要，商品数量修改时也需要
* 3-2、小计，在商品数量修改时统计，数量*单价
* 3-3、数量修改，改变输入框当中的数字
* 3-4、单项删除，删除当前这一项商品
* 3-5、全选，如果全选被选中，则所有商品也被选中，如果全选按钮取消选中，则所有商品也被取消选中
* 3-6、增加商品，在该商品的最后添加一栏新商品
* 3-7、全删，删除所有被选中的商品
* */
使用到的技术栈
使用html实现页面布局,使用原生js实现业务逻辑.
效果图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
#div1{
width: 730px;
margin: 0px auto;
}
#div1 ul,#div1 ol{
overflow: hidden;
}
#div1 ul li,#div1 ol li{
list-style: none;
float: left;
width: 100px;
line-height: 100px;
text-align: center;
}
#div1 ol li button{
width: 20px;
height: 20px;
}
#div1 ol li img{
width: 150px;
}
</style>
<script>
/*
* 制作购物车的思路：
* 1、页面的样式布局
* 2、了解购物车中有哪些功能
* 3、分别实现功能
* 3-1、总计，打开页面是需要，增加和删除商品时需要，商品数量修改时也需要
* 3-2、小计，在商品数量修改时统计，数量*单价
* 3-3、数量修改，改变输入框当中的数字
* 3-4、单项删除，删除当前这一项商品
* 3-5、全选，如果全选被选中，则所有商品也被选中，如果全选按钮取消选中，则所有商品也被取消选中
* 3-6、增加商品，在该商品的最后添加一栏新商品
* 3-7、全删，删除所有被选中的商品
* */
var divs;//父节点
//总计
function zong(){
//获取所有商品ol
var ols=document.getElementsByTagName('ol')
// var ols=document.querySelectorAll('ol')
// console.log(ols)
//获取总计对象
var div2=document.getElementById('div2')
var sum=0;//总计
//循环遍历出商品中的小计
// ols.forEach(function (item) {
// //获取每个商品中的小计
// var num=item.lastElementChild.previousElementSibling.lastElementChild.innerText
// console.log(num)
// })
for(var i=0;i<ols.length;i++){
//获取每个商品中的小计
var num=ols[i].lastElementChild.previousElementSibling.lastElementChild.innerText
sum+=Number(num)
}
div2.lastElementChild.innerText=sum
}
var i=3
function addRow(){
//获取插入的子节点
var div2=document.getElementById('div2')
//创建节点
var ol=document.createElement('ol')
ol.innerHTML='<li style="width: 60px"><input type="checkbox" name="box1"></li>'
+'<li style="width:170px"><img src="img/'+i+'.jpg"></li>'
+'<li>'
+'<button οnclick="jian(this)">-</button>'
+'<input type="text" value="1" size="1">'
+'<button οnclick="jia(this)">+</button>'
+'</li>'
+'<li>￥<span>2000.5</span></li>'
+'<li>手机1号</li>'
+'<li>￥<span>2000.5</span></li>'
+'<li><button style="width: 40px" οnclick="delRow(this)">删除</button></li>'
//追加
divs.insertBefore(ol,div2)
i++
if(i==8){
i=1
}
zong()
}
//删除
function delRow(btn){
//获取需要删除的子元素节点
var ol2= btn.parentNode.parentNode
divs.removeChild(ol2)
zong()
}
//加法
function jia(btn){
//获取数量
var m=btn.previousElementSibling.value
m++
//给输入框赋值
btn.previousElementSibling.value=m
//获取单价
var price=btn.parentNode.nextElementSibling.lastElementChild.innerText
var num=m*Number(price)
btn.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.lastElementChild.innerText=num
zong()
}
//减法
function jian(btn){
//获取数量
var m=btn.nextElementSibling.value
m--
if(m<=1){
m=1
}
//给输入框赋值
btn.nextElementSibling.value=m
//获取单价
var price=btn.parentNode.nextElementSibling.lastElementChild.innerText
var num=m*Number(price)
btn.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.lastElementChild.innerText=num
zong()
}
//全选
function quan(){
//获取所有的商品选中框
var boxs=document.getElementsByName('box1')
var quan1=document.getElementsByName('quan')[0]
//循环遍历所有选中框
for(var i=0;i<boxs.length;i++){
if(quan1.checked){
boxs[i].checked=true
}else{
boxs[i].checked=false
}
}
}
//全删
function deletes(){
//获取所有的商品选中框
var boxs=document.getElementsByName('box1')
for(var i=boxs.length-1;i>=0;i--){
if(boxs[i].checked){
divs.removeChild(boxs[i].parentNode.parentNode)
}
}
zong()
}
window.onload= function () {
zong()
//获取追加的父节点
divs=document.getElementById('div1')
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li style="width: 60px"><input type="checkbox" name="quan" onclick="quan()">全选</li>
<li style="width:170px">商品图片</li>
<li>数量</li>
<li>单价</li>
<li>商品名称</li>
<li>小计</li>
<li>操作</li>
</ul>
<ol>
<li style="width: 60px"><input type="checkbox" name="box1"></li>
<li style="width:170px"><img src="img/1.jpg"></li>
<li>
<button onclick="jian(this)">-</button>
<input type="text" value="1" size="1">
<button onclick="jia(this)">+</button>
</li>
<li>￥<span>2000.5</span></li>
<li>手机1号</li>
<li>￥<span>2000.5</span></li>
<li><button style="width: 40px" onclick="delRow(this)">删除</button></li>
</ol>
<ol>
<li style="width: 60px"><input type="checkbox" name="box1"></li>
<li style="width:170px"><img src="img/2.jpg"></li>
<li>
<button onclick="jian(this)">-</button>
<input type="text" value="1" size="1">
<button onclick="jia(this)">+</button>
</li>
<li>￥<span>2100.5</span></li>
<li>手机2号</li>
<li>￥<span>2100.5</span></li>
<li><button style="width: 40px" onclick="delRow(this)">删除</button></li>
<!-- var num=ols[i].lastElementChild.previousElementSibling.lastElementChild.innerText-->
</ol>
<div id="div2">
<button onclick="deletes()">全刪</button>
<button onclick="addRow()">增加一行</button>
￥<span></span>
</div>
</div>
</body>
</html>
