北大青鸟javascript第九章作业婴儿购物车代码
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>爱母婴</title>
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<div id="header"><img src="./images/logo.png" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">爱母婴</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<form action="" method="post" name="myform">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value="" />全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <a href="#"
class="contact">立即沟通</span></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"
onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="./images/item1.jpg" alt="shopping" /></td>
<td class="cart_td_3"><a href="#">宝贝第一Babyfirst QQ MI高脚餐椅(几何空间*红)</a><br />
颜色：棕色 尺码：45<br />
保障：<img src="./images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">457.00</td>
<td class="cart_td_6"><img src="./images/taobao_minus.jpg" alt="minus"
onclick="changeNum('num_1','minus')" class="hand" /> <input id="num_1" type="text"
value="1" class="num_input" readonly="readonly" /> <img src="./images/taobao_adding.jpg"
alt="add" onclick="changeNum('num_1','add')" class="hand" /></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a><a
href="#" class="contact">立即沟通</span></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2"
onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="./images/item2.jpg" alt="shopping" /></td>
<td class="cart_td_3"><a href="#">熊本熊便携式妈咪餐椅包（适合0-4岁）</a><br />
保障：<img src="./images/taobao_icon_01.jpg" alt="icon" /> <img
src="./images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">388.00</td>
<td class="cart_td_6"><img src="./images/taobao_minus.jpg" alt="minus"
onclick="changeNum('num_2','minus')" class="hand" /> <input id="num_2" type="text"
value="1" class="num_input" readonly="readonly" /> <img src="./images/taobao_adding.jpg"
alt="add" onclick="changeNum('num_2','add')" class="hand" /></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <a href="#"
class="contact">立即沟通</span></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"
onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="./images/item3.jpg" alt="shopping" /></td>
<td class="cart_td_3"><a href="#">荟智小胃王餐椅（原木色）（7个月-10岁）</a><br />
保障：<img src="./images/taobao_icon_01.jpg" alt="icon" /> <img
src="./images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">199.00</td>
<td class="cart_td_6"><img src="./images/taobao_minus.jpg" alt="minus"
onclick="changeNum('num_3','minus')" class="hand" /> <input id="num_3" type="text"
value="1" class="num_input" readonly="readonly" /> <img src="./images/taobao_adding.jpg"
alt="add" onclick="changeNum('num_3','add')" class="hand" /></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a><a
href="#" class="contact">立即沟通</a></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"
onclick="selectSingle()" /></td>
<td class="cart_td_2"><img src="./images/item4.jpg" alt="shopping" /></td>
<td class="cart_td_3"><a href="#">babyhood 高脚餐椅 天蓝</a><br />
保障：<img src="./images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">199.00</td>
<td class="cart_td_6"><img src="./images/taobao_minus.jpg" alt="minus"
onclick="changeNum('num_4','minus')" class="hand" /> <input id="num_4" type="text"
value="1" class="num_input" readonly="readonly" /> <img src="./images/taobao_adding.jpg"
alt="add" onclick="changeNum('num_4','add')" class="hand" /></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:deleteSelectRow()"><img src="./images/taobao_del.jpg"
alt="delete" /></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input value="立即购买" type="button" />
</td>
</tr>
</form>
</table>
</div>
<div id="tab_cont">
<ul>
<li><a href="#" onmousemove="changeTab(1);">最近收藏</a></li>
<li><a href="#" onmousemove="changeTab(2);">最近浏览</a></li>
<li><a href="#" onmousemove="changeTab(3);">猜你喜欢</a></li>
</ul>
<div id="cont1" class="sp">
<dl>
<dt><img src="./images/list1.jpg" alt="" /></dt>
<dd>
<b>￥9</b>
<span>亨氏120g乐维滋(苹果草莓)(1岁+)</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list2.jpg" alt="" /></dt>
<dd>
<b>￥107</b>
<span>嘉宝Gerber 豌豆营养米粉225g</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list3.jpg" alt="" /></dt>
<dd>
<b>￥29</b>
<span>北田 米饼100g 香蕉牛奶口味</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list4.jpg" alt="" /></dt>
<dd>
<b>￥19.9</b>
<span>贝莱康Balic全棉安心内裤(3条装)</span>
</dd>
</dl>
</div>
<div id="cont2" class="sp">
<dl>
<dt><img src="./images/list5.jpg" alt="" /></dt>
<dd>
<b>￥110</b>
<span>大王天使环贴式纸尿裤XL30 尿不湿</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list6.jpg" alt="" /></dt>
<dd>
<b>￥49</b>
<span>NUK 婴儿超厚特柔湿巾20抽*5包</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list7.jpg" alt="" /></dt>
<dd>
<b>￥170</b>
<span>贝亲婴儿柔湿巾80抽*3包</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list8.jpg" alt="" /></dt>
<dd>
<b>￥269</b>
<span>尤妮佳moony 纸尿裤M64 尿不湿 新老包装混发</span>
</dd>
</dl>
</div>
<div id="cont3" class="sp">
<dl>
<dt><img src="./images/list9.jpg" alt="" /></dt>
<dd>
<b>￥55</b>
<span>费雪声光安抚海马-蓝色M8581/DGH82</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list10.jpg" alt="" /></dt>
<dd>
<b>￥109</b>
<span>奥迪超级飞侠变形机器人-多多 710220</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list11.jpg" alt="" /></dt>
<dd>
<b>￥368</b>
<span>风火轮火辣小跑车(混发)</span>
</dd>
</dl>
<dl>
<dt><img src="./images/list12.jpg" alt="" /></dt>
<dd>
<b>￥52</b>
<span>贝亲Pigeon 婴儿桃叶精华爽身露200ml 桃子水</span>
</dd>
</dl>
</div>
</div>
<div class="footer">
<div class="down_top">
<a href="">阿里巴巴集团 <span>|</span> </a>
<a href="">淘宝网 <span>|</span> </a>
<a href="">天猫 <span>|</span> </a>
<a href="">聚划算 <span>|</span> </a>
<a href="">全球速卖通 <span>|</span> </a>
<a href="">阿里巴巴国际交易市场 <span>|</span> </a>
<a href="">1688 <span>|</span> </a>
<a href="">阿里妈妈 <span>|</span> </a>
<a href="">飞猪 <span>|</span> </a>
<a href="">阿里云计算 <span>|</span> </a>
<a href="">友盟 <span>|</span> </a><br />
<a href="">大麦网 <span>|</span> </a>
<a href="">钉钉 <span>|</span> </a>
<a href="">支付宝 <span>|</span> </a>
<a href="">优酷 <span>|</span> </a>
<a href="">阿里影业 <span>|</span> </a>
<a href="">阿里体育 <span>|</span> </a>
<a href="">阿里健康 <span></span> </a>
<hr/>
</div>
<div class="down_center">
<a href="">关于淘宝 </a>
<a href="">合作伙伴 </a>
<a href="">营销中心 </a>
<a href="">廉正举报 </a>
<a href="">诚征英才 </a>
<a href="">联系我们 </a>
<a href="">网站地图 </a>
<a href="">开发平台 </a>
<a href="">隐私权政策 </a>
<a href="">法律声明 </a>
<a href="">知识产权 </a>
</div>
<div class="down_bot">
<img src="./images/bot1.gif" alt="" />
<img src="./images/bot2.gif" alt="" />
<img src="./images/bot3.png" alt="" />
<img src="./images/bot4.png" alt="" />
</div>
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined" style=" display: none;"></button>
<div id="info"></div>
</div>
<script src="js/mui.min.js"></script>
<script>
let sp = document.querySelectorAll('.sp');
window.onload = function show() {
for (let i =1 ; i < sp.length; i++) {
sp[i].style.display = "none";
}
}
//全选
let qx = document.getElementById("allCheckBox");
let qxk = document.getElementsByName("cartCheckBox");
for (let i = 0; i < qxk.length; i++) {
qx.addEventListener("click", function() {
qxk[i].checked = this.checked
});
}
//有没选的全选就取消
function selectSingle() {
for (let i = 0; i < qxk.length; i++) {
if (!qxk[i].checked) {
qx.checked = false;
break;
}
}
}
function changeTab(sy) {
for (let i = 0; i < sp.length; i++) {
sp[i].style.display = i == (sy - 1) ? "block" : "none";
}
}
function deleteRow(rowId) {
let id = document.getElementById(rowId);
let dianpu = id.previousElementSibling //获得店铺节点标签
id.remove();
dianpu.remove();
productCount();
}
function deleteSelectRow() {
let cartCheck=document.getElementsByName("cartCheckBox");
if(cartCheck.length==0){
mui.alert('没有商品欧', '提示', function() {
});
}
for (let index = cartCheck.length - 1; index >= 0; index--) {
if (cartCheck[index].checked) {
cartCheck[index].parentNode.parentNode.previousElementSibling.remove();
cartCheck[index].parentNode.parentNode.remove();
}
}
productCount();
qx.checked=false
}//改变value中
function changeNum(numId, flag) {
let numid = document.getElementById(numId); //传过来的id；
if (flag == "add") {
numid.value ++
productCount();
} else {
if (numid.value == 1) {
alert('商品数量不能小于1'）
return;
}
numid.value --
}
productCount();
}
window.onload = productCount()
function productCount() {
let jsjf = 0; //总积分
let price = 0; //总价格
let danjia45 = document.getElementsByClassName('cart_td_7')
let danjia = document.getElementsByClassName('cart_td_5'); //单价
let jifen = document.getElementsByClassName('cart_td_4'); //积分
let shuliang = document.getElementsByClassName('num_input');//input
let total = document.getElementById("total"); //总积分
let jifei1 = document.getElementById("integral"); //总价格
for (var i = 0; i < danjia.length; i++) {
jsjf += danjia[i].innerHTML * shuliang[i].value;
price += jifen[i].innerHTML * shuliang[i].value;
danjia45[i].innerHTML = danjia[i].innerHTML * shuliang[i].value;
}
total.innerHTML = jsjf;
jifei1.innerHTML = price;
}
</script>
</body>
</html>
5700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
