编程挑战，用JS实现购物车特效教程-慕课网

编程挑战

小伙伴们，根据所学知识，使用JS实现案例中的购物车功能。

效果图:

任务要求:

一、扩展document.getElementsByClassName方法。

提示:
1. 判断是否存在document.getElementsByClassName
2. 如果不存在，使用document.getElementsByTagName('*')结合className来模拟

二、定义计算函数getTotal，计算总价格，数目，并更新已选弹层的HTML。

提示:
   1. 遍历每一行，判断是否已选。
   2.如果已选，分别累加总数，价格，弹层的HTML。
   3. 更新累加结果。

注意：如果没有勾选行的时候，弹层的状态。

三、定义小计价格函数getSubTotal。

提示:
   1.接受一个参数tr，为要计算的行。
   2.取得数目输入框的值，乘单价。
   3. 结果写入小计的单元格。

四、绑定每一行勾选框事件。

提示:
   1.遍历每一行，取得勾选框，添加click事件。
   2. 判断是否为全选框，如果是，更新所有勾选框。
   3. 如果有一个未选择，全选框checked为false。

五、绑定已选按钮事件，用于显示或者隐藏浮层。

提示:
   1. 根据foot.className来相应变化，实现隐藏和显示。
   2. 如果已选项为0，则不显示。

六、在已选弹层上事件代理，用于删除已选。

提示:
   1.根据目标元素的class来判断是否点击了取消选择。
   2.取得代表行索引的自定义属性index。
   3. 把相应的勾选框去掉勾选。
   4.手动触发勾选框的click事件

注意：勾选框事件的手动触发。

七、遍历每一行，绑定事件。

1）在tr上绑定点击事件代理

提示:
   1.获取触发元素，取得class。
   2.如果class为add， 增加数目，并计算小计价格。
   3.如果class为reduce， 减少数目，并计算小计价格。
   4.如果class为delete，删除相应的行。
   5. 调用计算总数函数getTotal。

注意：IE下event对象存在window下。

2）绑定数量输入框事件，实时更新小计价格

提示:
   1.绑定keyup事件。
   2.如果输入框的值不是数字或者小于1，重置为1。
   3.根据输入框的值，更新减号的显示和隐藏。

八、默认勾选所有商品。

提示:
   1.更改全选框的checked为true。
   2.触发全选框的click事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript">
window.onload = function () {
var cartTable = document.getElementById('cartTable');
var tr = cartTable.children[1].rows;
var checkInputs = document.getElementsByClassName('check');
var checkAllInputs = document.getElementsByClassName('check-all');
var selectedTotal = document.getElementById('selectedTotal');
var priceTotal = document.getElementById('priceTotal');
var selected = document.getElementById('selected');
var foot = document.getElementById('foot');
var selectedViewList = document.getElementById('selectedViewList');
var deleteAll = document.getElementById('deleteAll');
// 扩展document.getElementsByClassName方法
//计算函数getTotal，计算总价格，数目，并更新已选弹层的HTML
//小计价格函数getSubTotal
//绑定勾选框事件
//绑定已选按钮事件，用于显示或者隐藏浮层
//在已选弹层上事件代理，用于删除已选
for (var i = 0; i < tr.length; i++) {
//表格每一行上事件代理
//绑定数量输入框事件，实时更新小计价格
}
// 绑定删除按钮事件，删除已选项
// 默认选择所有商品
}
</script>
</head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="http://img1.sycdn.imooc.com//53b4c0d900013fbf02200220.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="http://img1.sycdn.imooc.com//53b4c0f60001b4ee02200147.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
<td class="price">3888.50</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">3888.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="http://img1.sycdn.imooc.com//53b4c10b0001551b02200165.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
<td class="price">1428.50</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">1428.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="http://img1.sycdn.imooc.com//53b4c11b0001b00f02200220.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
<td class="price">640.60</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">640.60</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结算</div>
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品
<span id="selectedTotal">0</span>件
<span class="arrow up">︽</span>
<span class="arrow down">︾</span>
</div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
</div>
<span class="arrow">◆<span>◆</span></span>
</div>
</div>
</body>
</html>