js实现购物车
2016-06-02 14:57
204 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>购物车</title> <link rel="stylesheet" href="shoppingCar.css" type="text/css"> </head> <body> <div id="shopCar"> <table id="table"> <thead> <th><input class="checkAll check" type="checkbox"/>全选</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>删除</th> </thead> <tbody> <tr> <td><input class="check" type="checkbox"></td> <td><img src="images/1.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td> <td>5.00</td> <td> <span class="reduce">-</span> <input type="text" style="width:20px" value="1" class="goodsNum"/> <span class="add">+</span> </td> <td>5.00</td> <td><span class="delete">删除</span></td> </tr> <tr> <td><input class="check" type="checkbox"></td> <td><img src="images/2.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td> <td>5.00</td> <td> <span class="reduce">-</span> <input type="text" style="width:20px" value="1" class="goodsNum"/> <span class="add">+</span> </td> <td>5.00</td> <td><span class="delete">删除</span></td> </tr> <tr> <td><input class="check" type="checkbox"></td> <td><img src="images/3.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td> <td>5.00</td> <td> <span class="reduce">-</span> <input type="text" style="width:20px" value="1" class="goodsNum"/> <span class="add">+</span> </td> <td>5.00</td> <td><span class="delete">删除</span></td> </tr> <tr> <td><input class="check" type="checkbox"></td> <td><img src="images/4.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td> <td>5.00</td> <td> <span class="reduce">-</span> <input type="text" style="width:20px" value="1" class="goodsNum"/> <span class="add">+</span> </td> <td>5.00</td> <td><span class="delete">删除</span></td> </tr> <tr> <td><input class="check" type="checkbox"></td> <td><img src="images/5.jpg" class="goods"><span class="detail">时尚百搭购物袋</span></td> <td>5.00</td> <td> <span class="reduce">-</span> <input type="text" style="width:20px" value="1" class="goodsNum"/> <span class="add">+</span> </td> <td>5.00</td> <td><span class="delete">删除</span></td> </tr> </tbody> </table> <div id="foot"> <span id="foot_checkAll"><input type="checkbox" class="checkAll check" >全选</span><span class="delete" id="foot_delete">删除</span> <span id="count">总共有<span id="num">0</span>件商品 共计：<span id="total">0.00</span></span><span id="pay"><input type="button" value="结算" style="width:80px;height:50px"></span> </div> </div> <script type="text/javascript" src="shoppingCar.js" charset="gb2312"></script> </body> </html>
getTotal:
获取全选框
获取选择框
用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格
全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），
同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，
同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片
选择框onclick:判断是被选择还是被取消，选择了的话，当行背景变高亮
（加上一个class，而该class在css中写好背景颜色的改变），总价改变，商品件数改变
如果是被取消了，className=""空，然后总价改变，商品件数改变,同时要把全选按钮取消
// JavaScript Document
/*
getTotal:
获取全选框
获取选择框
用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格
全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），
同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，
同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片
选择框onclick:判断是被选择还是被取消，选择了的话，当行背景变高亮
（加上一个class，而该class在css中写好背景颜色的改变），总价改变，商品件数改变
如果是被取消了，className=""空，然后总价改变，商品件数改变,同时要把全选按钮取消
获取加减按钮，可用事件代理
加：把前面的input元素里数量加1，同时用innerHTML把后面的小计更新，具体的值为当前商品的数量乘以价格
减：与加类似，不过在减1之前判断一下当前的数量是否大于1
删除onclick:首先是提示“确定要删除该商品吗？”，可以自己写一个函数美化弹出的窗口，当用户按下确定之后，
删除该行。
本身在设计之前要写一个div放置选中的商品的图片，display:none或者visibility:hidden.
已选商品件数onclick：可以显示选择了哪些商品.
显示该div（添加一个class属性，该属性在css中display:block或者visibility为visible
商品件数div里每张图片左上角的取消选择按钮，
最后一行选择删除按钮onclick：（先提示一下确定要删除这些商品吗）先判断全选按钮，为true的话把所有的行删掉。
为false的话再用一个for循环遍历选择框，如果选择了的话把该行删除。
*/
window.onload=function(){
var goodsNum=document.getElementsByClassName("goodsNum");
var deletes=document.getElementsByClassName("delete");
var checkAll=document.getElementsByClassName("checkAll");
var check=document.getElementsByClassName("check");
var table=document.getElementById("table");
var trs=document.getElementById("table").rows;//包括th的值！！
document.getElementById("foot").style.width=table.offsetWidth+"px";
if(document.getElementsByClassName){
document.getElementsByClassName=function(str){
var all=document.getElementsByTagName("*");
var res=[];
for(var i=0;i<all.length;i++){
if(all[i].className==str || all[i].className==' '+str|| all[i].className==' '+str+' '||all[i]==' '+str)
{
res.push(all[i]);
}
}
return res;
}
}
f
4000
unction getTotal(){
var sum=0.00;
var count=0;
for(var i=1;i<trs.length;i++){
if(trs[i].getElementsByTagName("input")[0].checked==true){
var num=parseInt(trs[i].getElementsByTagName("input")[1].value);
var price=parseFloat(trs[i].cells[2].innerHTML);
sum+=num*price;
count+=num;
sum.toFixed(2);
if(num!='NaN'){
trs[i].cells[4].innerHTML=(num*price).toFixed(2);
}else{
trs[i].cells[4].innerHTML="0.00";
}
}
}
if(count!=NaN){
document.getElementById("num").innerHTML=count;
}else{
alert("It's NaN");
document.getElementById("num").innerHTML=0;
}
if(sum!='NaN'){
document.getElementById("total").innerHTML=sum.toFixed(2);}else{
document.getElementById("total").innerHTML="0.00";
}
}
for(var i=0;i<checkAll.length;i++){
checkAll[i].addEventListener("click",function(){
if(this.checked==true){
for(var j=0;j<trs.length;j++){
var inputs=trs[j].getElementsByTagName("input");
inputs[0].checked=true;
inputs[0].parentNode.parentNode.className="on";
}
checkAll[(i+1)%2].checked=true;
getTotal();
}else{
for(var j=0;j<trs.length;j++){
trs[j].getElementsByTagName("input")[0].checked=false;
trs[j].getElementsByTagName("input")[0].parentNode.parentNode.className="";
}
checkAll[(i+1)%2].checked=false;
getTotal();
}
},false)
}
for(var i=0;i<goodsNum.length;i++){
goodsNum[i].onkeyup=function(){
getTotal();
}
}
//在table中用上事件代理
table.addEventListener("click",function(event){
var target=event.target||event.srcElement;
var cls=target.className;
switch(cls){
case "check":if(target.checked==true){
target.parentNode.parentNode.className="on";
}else if(target.checked==false){
for(var i=0;i<checkAll.length;i++){
checkAll[i].checked=false;
}
target.parentNode.parentNode.className="";
}
getTotal();
break;
case "reduce":
var value=parseInt(target.parentNode.parentNode.getElementsByTagName("input")[1].value);
if(value>1){
target.parentNode.parentNode.getElementsByTagName("input")[1].value=value-1;
}
getTotal();
break;
case "add":
var value=target.parentNode.parentNode.getElementsByTagName("input")[1].value;
target.parentNode.parentNode.getElementsByTagName("input")[1].value=parseInt(value)+1;
getTotal();
break;
case "delete":if(confirm("您确定要删除该商品吗？")){
for(var i=0;i<trs.length;i++){
if(trs[i]==target.parentNode.parentNode){ table.deleteRow(i);break;}
}
};
break;
}
},false);
var footDelete=document.getElementById("foot_delete");
footDelete.onclick=function(){
if(confirm("您确定要删除选中的商品吗？")){
for(var i=1;i<trs.length;i++){
if(trs[i].getElementsByTagName("input")[0].checked==true ){
table.deleteRow(i);
}
}
}
}
}获取加减按钮，可用事件代理
加：把前面的input元素里数量加1，同时用innerHTML把后面的小计更新，具体的值为当前商品的数量乘以价格
减：与加类似，不过在减1之前判断一下当前的数量是否大于1
删除onclick:首先是提示“确定要删除该商品吗？”，可以自己写一个函数美化弹出的窗口，当用户按下确定之后，
删除该行。
本身在设计之前要写一个div放置选中的商品的图片，display:none或者visibility:hidden.
已选商品件数onclick：可以显示选择了哪些商品.
显示该div（添加一个class属性，该属性在css中display:block或者visibility为visible
商品件数div里每张图片左上角的取消选择按钮，
最后一行选择删除按钮onclick：（先提示一下确定要删除这些商品吗）先判断全选按钮，为true的话把所有的行删掉。
为false的话再用一个for循环遍历选择框，如果选择了的话把该行删除。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 欧拉函数 cojs 2181. 打表
- JS篇——javascript中的this
- js获取URL地址栏中的参数
- json转类
- jsonp
- jsp简单实现统计在线人数
- JS跨域获取cookies
- js 清除最后一位 例如逗号
- 使用canvg截屏上传至服务器并返回二维码
- jfinal中JsonResult常用
- 页面分页
- js 常用库工具类等
- js 阿拉伯数字转转汉字
- JavaScript中的Array 对象（数组对象）
- jsp 页面获取xml的内容
- Ajax验证登录后跳转到主页面
- 【JavaScript】常用方法
- 关于模板页调用js的问题
- constructor与prototype
- JavaScript 标准对象