淘宝购物车原⽣js写法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
width: 1000px;
margin: 0 auto;
}
.title{
font-size: 14px;
}
.face{
width: 80px;
}
.name{
color: red;
font-size: 12px;
display: inline-block;
width: 200px;
margin-left: 10px;
}
td{
padding: 10px 0;
min-width: 60px;
}
.price{
font-weight: bold;
color: black;
}
.
totle{
font-weight: bold;
color: red;
}
网页购物车代码
tr{
border: 1px solid #d8d8d8;
background-color: #f2f2f2;
}
.btn button{
width: 30px;
height: 30px;
border-style: none;
background-color: #e0e0e0;
outline: none;
}
.btn input{
width: 30px;
height: 30px;
border-style: none;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr class="title">
<td><input class="ckbox" type="checkbox"/>全选</td>
<td>商品信息</td>
<td>单价</td>
<td>数量</td>
<td>⾦额</td>
<td>⾦额</td>
<td>操作</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="./img/O1CN0147ITIP220but21tz7_!!387597058.jpg_80x80.jpg" alt=""/>
<span class="name">豫⽵⾹辣⽜⾁⽅便⾯60包袋装速⾷⼲吃⾯⼲脆⾯泡⾯整箱包邮特价</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="./img/O1CN0147ITIP220but21tz7_!!387597058.jpg_80x80.jpg" alt=""/>
<span class="name">豫⽵⾹辣⽜⾁⽅便⾯60包袋装速⾷⼲吃⾯⼲脆⾯泡⾯整箱包邮特价</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="./img/O1CN0147ITIP220but21tz7_!!387597058.jpg_80x80.jpg" alt=""/>
<span class="name">豫⽵⾹辣⽜⾁⽅便⾯60包袋装速⾷⼲吃⾯⼲脆⾯泡⾯整箱包邮特价</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="./img/O1CN0147ITIP220but21tz7_!!387597058.jpg_80x80.jpg" alt=""/>
<span class="name">豫⽵⾹辣⽜⾁⽅便⾯60包袋装速⾷⼲吃⾯⼲脆⾯泡⾯整箱包邮特价</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="./img/O1CN0147ITIP220but21tz7_!!387597058.jpg_80x80.jpg" alt=""/>
<span class="name">豫⽵⾹辣⽜⾁⽅便⾯60包袋装速⾷⼲吃⾯⼲脆⾯泡⾯整箱包邮特价</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr>
<td><input type="checkbox" class="ckbox"/>全选</td>
<td colspan="2">已选商品<span class="number">0</span>件</td>
<td>合计：<span class="totleprice">0</span>元</td>
<td colspan="2"><button>结算</button></td>
</tr>
</table>
<script src="js/cart.js"></script>
</body>
</html>
var btnck = ElementsByClassName("ckbox");
var ckall = ElementsByClassName("ckbtn");
var ckall = ElementsByClassName("ckbtn");
var count=0;
for (var i = 0; i < ckall.length; i++) {
ckall[i].onclick = function () {
if(this.checked){
count++;;
}
else{
count--;
}
if(count==ckall.length)
{
btnck[0].checked=true;
btnck[1].checked=true;
}
else{
btnck[0].checked=false;
btnck[1].checked=false;
}
addtotle();
}
}
for (var index in btnck) {
btnck[index].index = index;
btnck[index].onclick = function () {
btnck[this.index == 0 ? 1 : 0].checked = !btnck[this.index == 0 ? 1 : 0].checked;        if(this.checked)
{
for (var i = 0; i < ckall.length; i++) {
ckall[i].checked = true;
}
}
else{
for (var i = 0; i < ckall.length; i++) {
ckall[i].checked = false;
}
count=0;
}
addtotle();
}
}
var btnleft = ElementsByClassName("btnleft");
var btnright = ElementsByClassName("btnright");
var txt = ElementsByClassName("txt");
var price = ElementsByClassName("price");
var totle = ElementsByClassName("totle");
var tprice = ElementsByClassName("totleprice");
var ElementsByClassName("number");
for (var i = 0; i < btnleft.length; i++) {
btnleft[i].index = i;
btnleft[i].onclick = function () {
var val = txt[this.index].value;
val--;
if (val < 1) {
val = 1;
}
txt[this.index].value = val;
addprice(this.index, val);
addtotle();
}
btnright[i].index = i;
btnright[i].onclick = function () {
var val = txt[this.index].value;
val++;
txt[this.index].value = val;
txt[this.index].value = val;
addprice(this.index, val);
addtotle();
}
}
function addprice(index, value) {
totle[index].innerHTML = "共" + (price[index].getAttribute("data-price") * value).toFixed(2);
totle[index].setAttribute("data-totle", (price[index].getAttribute("data-price") * value).toFixed(2)); }
function addtotle() {
var totleprice = 0;
var number=0;
for (var i = 0; i < ckall.length; i++) {
if (ckall[i].checked) {
totleprice += parseFloat(totle[i].getAttribute("data-totle"));
number+=parseInt(txt[i].value);
}
}
tprice[0].innerHTML = "共" + Fixed(2);
num[0].innerHTML=number;
}
考虑到代码的优化，还是建议使⽤jQuery框架来写，原⽣js代码个⼈感觉很冗杂。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。