用javascript/js h5+css写一个淘宝结算界面

基于html 加纯js css仿写一个淘宝结算界面，实现大部分功能。
部分代码如下：

js部分：
let dataArr = [{
shopName: “纤巧百媚时尚鞋坊卖”,
shopSell: “纤巧百媚”,
shopImg: “./tobaoimg/taobao_cart_01.jpg”,
imgInfo: {
goodsName: “日韩流行风时尚美眉最爱独特米字拼图金属坡”,
goodsColor: “棕色”,
goodsSize: “37”,
goodsQuality: “保障”,
},
integral: “5”,
price: “138.00”,
count: “1”,
},
{
shopName: “香港我的美丽日记卖家”,
shopSell: “lokemick2009”,
shopImg: “./tobaoimg/taobao_cart_02.jpg”,
imgInfo: {
goodsName: “chanel/香奈儿/香奈儿炫亮魅力唇膏”,
goodsColor: “红色”,
goodsSize: “3.5g”,
goodsQuality: “保障”,
},
integral: “12”,
price: “265.00”,
count: “1”,
},
{
shopName: “实体经营卖家”,
shopSell: “林颜店铺”,
shopImg: “./tobaoimg/taobao_cart_03.jpg”,
imgInfo: {
goodsName: “蝶妆海蜇精华粉底液”,
goodsColor: “象牙白”,
goodsSize: “10#”,
goodsQuality: “保障”,
},
integral: “3”,
price: “85.00”,
count: “1”,
},
{
shopName: “红豆豆的小屋卖家”,
shopSell: “taobao豆豆”,
shopImg: “./tobaoimg/taobao_cart_04.jpg”,
imgInfo: {
goodsName: “相宜促销专供大S推荐最好用LilyBell化妆棉”,
goodsColor: “白色”,
goodsSize: “100张”,
goodsQuality: “保障”,
},
integral: “12”,
price: “12.00”,
count: “1”,
},
]

let bodyEle = document.getElementsByTagName(“tbody”)[0];

// 渲染页面
function rederPage(textIndex) {
bodyEle.innerHTML = “”;
let str = “”;
dataArr.map((item, index) => {
str += <tr> <td>店铺：</td> <td>${item.shopName}&nbsp; <span>卖家：</span>${item.shopSell} <img src="./tobaoimg/taobao_relation.jpg" alt=""></td> </tr> <tr> <td><input type="checkbox" data-index=${index} class="pick"></td> <td> <img src="${item.shopImg}" alt=""> <div> <p>${item.imgInfo.goodsName}</p> <p>颜色：${item.imgInfo.goodsColor}&nbsp;尺码: ${item.imgInfo.goodsSize}</p> <p>${item.imgInfo.goodsQuality}<img src="./tobaoimg/taobao_icon_01.jpg" alt=""></p> </div> </td> <td>${item.integral}</td> <td>${item.price}</td> <td> <span data-index=${index} class="plusAdd">-</span> <input type="text" value="${item.count}" data-index=${index} class="changeCount"> <span data-index=${index} class="plusAdd">+</span> </td> <td>${item.price*item.count}</td> <td data-index=${index} class="del">删除</td> </tr>;
});
str += <tr> <td colspan="4"><input type="button" value="删除所选"></td> <td colspan="3"> <p>商品总价(不含运费)：<span class="resMon">0</span>元</p> <p>可获积分&nbsp;<span class="resIn">0</span>点</p> <input type="button" value="立即购买"></td> </tr>;
bodyEle.innerHTML = str;
if (textIndex != undefined) {
let inpTeEles = document.getElementsByClassName(“changeCount”);
inpTeEles[textIndex].focus();
inpTeEles[textIndex].value = “”;
inpTeEles[textIndex].value = dataArr[textIndex].count;
}
if (dataArr.length == 0) {
let allPickEle = document.getElementById(“allPick”);
allPickEle.checked = false;
}
}
rederPage();

// 加减事件
bodyEle.addEventListener(“click”, plusAdd);

// 加减函数
function plusAdd(e) {
let event = e || window.event;
// let plusAddEles=document.getElementsByClassName(“plusAdd”);
if (event.target.className == “plusAdd”) {
if (event.target.innerText == “-” && dataArr[event.target.dataset.index].count > 1) {
dataArr[event.target.dataset.index].count = --event.target.nextElementSibling.value;
rederPage();
}
if (event.target.innerText == “+”) {
dataArr[event.target.dataset.index].count = ++event.target.previousElementSibling.value;
rederPage();
}
}
}

// input 输入事件
bodyEle.addEventListener(“input”, e => {
let event = e || window.event;
if (event.target.className == “changeCount”) {
dataArr[event.target.dataset.index].count = event.target.value;
console.log(event.target.dataset.index);
rederPage(event.target.dataset.index);
}
});

let artEle = document.getElementsByTagName(“article”)[0];

// 选中 全选 价格和积分变化
artEle.addEventListener(“input”, pickGoods);

function pickGoods(e) {
let event = e || window.event;
let allPickEle = document.getElementById(“allPick”);
let pickEles = document.getElementsByClassName(“pick”);
let resMonEle = document.getElementsByClassName(“resMon”)[0];
let resInEle = document.getElementsByClassName(“resIn”)[0];
let resultMoney = 0;
let resultIntegral = 0;
if (event.target.className == “pick”) {
if ([…pickEles].filter(item => item.checked).length == […pickEles].length) {
allPickEle.checked = true;
} else {
allPickEle.checked = false;
}
[…pickEles].map((item, index) => {
if (item.checked == true) {
resultMoney += dataArr[index].price * dataArr[index].count;
resultIntegral += dataArr[index].integral * dataArr[index].count;
}
});
resMonEle.innerText = resultMoney;
resInEle.innerText = resultIntegral;
}
if (event.target.id == “allPick”) {
if (event.target.checked) {
[…pickEles].map((item, index) => {
item.checked = true;
resultMoney += dataArr[index].price * dataArr[index].count;
resultIntegral += dataArr[index].integral * dataArr[index].count;
});
resMonEle.innerText = resultMoney;
resInEle.innerText = resultIntegral;
} else {
[…pickEles].map(item => {
item.checked = false;
});
resMonEle.innerText = 0;
resInEle.innerText = 0;
}

}

}

// 删除事件
bodyEle.addEventListener(“click”, delGoods);

function delGoods(e) {
let event = e || window.event;
if (event.target.className == “del”) {
dataArr.splice(event.target.dataset.index, 1);
rederPage();
}
if (event.target.value == “删除所选”) {
let pickEles = document.getElementsByClassName(“pick”);
for (let i = dataArr.length - 1; i >= 0; i–) {
[…pickEles].map(item => {
if (item.checked) {
if (item.dataset.index == i) {
dataArr.splice(i, 1);
}
}
});
}
rederPage();
}
}

html部分：

您的位置

首页> 我的淘宝> 购物车

        </tbody>
    </table>







</article>







<script src="./index.js"></script>

全选	店铺信息	获积分	单价（元）	数量	小计	操作

css:
article {
width: 1077px;
margin: auto;
background-color: white;
}

article > div:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

article > div:nth-child(2) > p {
color: #2d2d2d;
margin-right: 7px;
}

article > div:nth-child(2) > a {
color: #175aaa;
text-decoration: none;
margin-right: 7px;
}

article > div:nth-child(2) > a:nth-child(4) {
color: #2d2d2d;
}

article > img:nth-child(3) {
height: 34px;
}

article > table {
width: 1163px;
}

article > table > thead {
color: #5f5f5f;
}

article > table > thead > tr > th {
text-align: center;
padding-bottom: 5px;
border-bottom: 4px solid #9dc4ff;
}

article > table > thead > tr > th:nth-child(1) {
width: 70px;
text-align: left;
}

article > table > thead > tr > th:nth-child(2) {
width: 460px;
}

article > table > tbody > tr:nth-child(2n+1) {
vertical-align: bottom;
}

article > table > tbody > tr:nth-child(2n+1) > td:nth-child(1) {
padding-top: 20px;
color: #2d2d2d;
font-size: 16px;
text-align: center;
}

article > table > tbody > tr:nth-child(2n+1) > td:nth-child(2) {
color: #2363ae;
}

article > table > tbody > tr:nth-child(2n+1) > td:nth-child(2) > span {
color: #2d2d2d;
}

article > table > tbody > tr:nth-child(2n) {
background-color: #def0ff;
text-align: center;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(1) {
text-align: center;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
font-size: 14px;
height: 100px;
text-align: left;
padding-right: 20px;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(2) > div {
margin-left: 15px;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(2) > div > p {
color: #175aaa;
margin-top: 5px;
margin-bottom: 5px;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(2) > div > p:nth-child(2) {
color: #2d2d2d;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(2) > div > p:nth-child(3) {
color: #2d2d2d;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(3) {
font-weight: bold;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(5) > input {
width: 30px;
border: 1px solid black;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(5) > span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fffdfe;
text-align: center;
line-height: 14px;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(6) {
color: #fe5904;
font-weight: bold;
}

article > table > tbody > tr:nth-child(2n) > td:nth-child(7) {
color: #175aaa;
}

article > table > tbody > tr:last-child {
vertical-align: middle;
}

article > table > tbody > tr:last-child > td:nth-child(1) {
text-align: left;
}

article > table > tbody > tr:last-child > td:nth-child(1) > input {
width: 125px;
height: 30px;
background-color: #e5e4e5;
color: #150606;
border: 1px solid #70726f;
outline: none;
border-radius: 5px;
}

article > table > tbody > tr:last-child > td:nth-child(2) {
text-align: right;
}

article > table > tbody > tr:last-child > td:nth-child(2) > p {
color: #2d2d2d;
font-size: 16px;
}

article > table > tbody > tr:last-child > td:nth-child(2) > p > span {
font-size: 20px;
color: #fe5904;
font-weight: bolder;
}

article > table > tbody > tr:last-child > td:nth-child(2) > input {
width: 100px;
height: 34px;
background-color: #fe5b04;
color: white;
border: 1px solid #fe5b04;
outline: none;
border-radius: 5px;
}

article > div:nth-child(5) {
height: 140px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 1163px;
}

article > div:nth-child(5) > input {
width: 125px;
height: 30px;
background-color: #e5e4e5;
color: #150606;
border: 1px solid #70726f;
outline: none;
border-radius: 5px;
}

article > div:nth-child(5) > div {
text-align: right;
}

article > div:nth-child(5) > div > p {
color: #2d2d2d;
font-size: 16px;
}

article > div:nth-child(5) > div > p > span {
font-size: 20px;
color: #fe5904;
font-weight: bolder;
}

article > div:nth-child(5) > div > input {
width: 100px;
height: 34px;
background-color: #fe5b04;
color: white;
border: 1px solid #fe5b04;
outline: none;
border-radius: 5px;
}
/*# sourceMappingURL=index.css.map */

图片自选