zoukankan html css js c++ java

javascript项目实战之原生js模拟淘宝购物车

通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：这里写图片描述
相应的代码：

shoppingCart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>JavaScript实现购物车项目实战</title>
    <link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
    <script type="text/javascript" src="./js/shoppingCart.js"></script>
</head>
<body>
    <table id="cartTable">
        <thead>
            <tr class="order_content">
                <th><input class="check_all check" type="checkbox"></input>&nbsp;全选</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>

        </thead>
        <tbody>
            <tr class="order_content">
                <td class="check"><input class = "check_one check" type="checkbox"></input></td>
                <td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td>
                <td class="price">5099.88</td>
                <td class="count">
                    <span class="reduce">-</span>
                    <input class="count_input" type="text" value="1"></input>
                    <span class="add">+</span>
                </td>
                <td class="subtotle">5099.88</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr class="order_content">
                <td class="check"><input class = "check_one check" type="checkbox"></input></td>
                <td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td>
                <td class="price">1099.99</td>
                <td class="count">
                    <span class="reduce">-</span>
                    <input class="count_input" type="text" value="1"></input>
                    <span class="add">+</span>
                </td>
                <td class="subtotle">1099.99</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr class="order_content">
                <td class="check"><input class = "check_one check" type="checkbox"></input></td>
                <td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 银16g WLAN7.9英寸</span></td>
                <td class="price">6599.00</td>
                <td class="count">
                    <span class="reduce">-</span>
                    <input class="count_input" type="text" value="1"></input>
                    <span class="add">+</span>
                </td>
                <td class="subtotle">6599.00</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr>
                <td class="check"><input class = "check_one check" type="checkbox"></input></td>
                <td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td>
                <td class="price">9998.68</td>
                <td class="count">
                    <span class="reduce">-</span>
                    <input class="count_input" type="text" value="1"></input>
                    <span class="add">+</span>
                </td>
                <td class="subtotle">9998.68</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
        </tbody>

    </table>
    <div class="slected view">
            <div id="selectedViewList" class="clearfix">
                <!-- <div><img src="./imgs/applewatch.png"><span>取消选择</span></div> -->
            </div>

            <span class="arrow">.<span>.</span></span>

    </div>
    <div id = "footer" class="footer">      
        <label class="fl select_all" ><input class="check_all check" type="checkbox">&nbsp;全选</input></label>
        <a class="fl delete_all" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结算</div>
        <div class="fr selected_totle">合计：￥ <span id="priceTotle">0.00</span> </div>
        <div class="fr selectAll" id="selected">已购商品
            <span id = "selectTotle">0</span>件
            <span class="arow up">+++</span>
            <span class="arow  down">---</span>
        </div>


    </div>

</body>
</html>

shoppingCart.js

window.onload = function(){
    //低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
    if (!document.getElementByClassName) {
        document.getElementByClassName =function(cls){
            var ret = [];
            var clsElments = document.getElementsByTagName('*');
            for (var i = 0, len = clsElments.length; i < len; i++) {
                //考虑一个标签有多个class的情况,这里用正则表达式会好一点
                if (clsElments[i].className == cls 
                    || (clsElments[i].className.indexOf(cls + " ") >= 0)
                    || (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
                    || (clsElments[i].className.indexOf(" " + cls) >= 0)) 
                {
                    ret.push(clsElments[i]);
                }
            }
            return ret;
        }

    }

    var cartTable = document.getElementById("cartTable");
    var tr = cartTable.children[1].rows;  //table标签特有的属性，rows可以获得表格元素的所有tr行。
    var checkInput = document.getElementByClassName('check');//获得所有的单选框
    var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框
    var priceTotle = document.getElementById("priceTotle");//总价
    var selectTotle = document.getElementById("selectTotle");//已选商品
    var selected = document.getElementById("selected");
    var footer = document.getElementById("footer");//底部标签
    var selectedViewList = document.getElementById("selectedViewList");//底部标签
    var deleteAll = document.getElementById("deleteAll");



    //计算总价格和数量
    function getTotle(){
        var selectNum = 0;//数量
        var priceNum = 0;//价格
        var HTMLstr = ""; //缩略图的字符串拼接
        for (var i = 0,len = tr.length; i < len; i++) {
            if (tr[i].getElementsByTagName("input")[0].checked) {
                tr[i].className ="on";
                selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
                priceNum += parseFloat(tr[i].cells[4].innerHTML);


                //拼接字符串显示已经选择的商品 
                HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消选择</span></div>';

            }
            else{
                tr[i].className = "";
            }
        }
        selectTotle.innerHTML = selectNum;
        priceTotle.innerHTML = priceNum.toFixed(2);//保留两位小数
        selectedViewList.innerHTML = HTMLstr;
    }

    //计算小计价格
    function getSubTotle(tr){
        var tds = tr.cells;
        var price = parseFloat(tds[2].innerHTML);
        var num = parseInt(tr.getElementsByTagName("input")[1].value);
        var subTotle = parseFloat(price * num).toFixed(2);
        tds[4].innerHTML = subTotle;
    }

    //复选框绑定单击事件
    for (var i = 0, len = checkInput.length; i < len; i++){
        checkInput[i].onclick =function (){
            //判断全选按钮，变更
            if (this.className == "check_all check") {
                for (var j = 0; j < len; j++){
                    checkInput[j].checked = this.checked;
                }
            }
            if (this.checked == false) {
                for (var k = 0,len2 = checkAllInput.length; k < len2; k++){
                    checkAllInput[k].checked = false;
                }
            }
            getTotle();
        }
    }



    //控制底部标签的显示
    selected.onclick = function(){
        if (footer.className == "footer") {
            footer.className == "footer show";
        } else {
            footer.className == "footer";   
        }
    }


    //图片缩略图的取消选择按钮功能,e为事件对象
    selectedViewList.onclick = function(e){
        //兼容低版本的IE
/*      if (e){
            e = e;
        }else{
            e = window.event;
        } */
        var e = e || window.event;
        var el = e.srcElement;
        if (el.className == "del") {
            var index = el.getAttribute("index");
            var input = tr[index].getElementsByTagName("input")[0];
            input.checked = false;
            input.onclick();
        }
    }

    //实现加减、删除操作。同样用事件代理的方法实现
    for (var i = 0, len3 = tr.length; i < len3; i++){
        tr[i].onclick = function(e){
            var e = e || window.event;
            var el = e.srcElement;
            var clsName = el.className;
            var input = this.getElementsByTagName("input")[1];
            var inputValue = parseInt(input.value);
            var reduce = this.getElementsByTagName("span")[1];
            switch (clsName){
                case "add":
                    /*parseInt(inputValue) ++;*/
                    input.value = inputValue + 1;
                    reduce.innerHTML ="-";
                    getSubTotle(this);
                    break;
                case "reduce":
                    if(inputValue >= 1){
                        input.value = inputValue - 1;
                    }else{
                        reduce.innerHTML ="";
                    }
                    getSubTotle(this);                  
                    break;
                case "delete":
                    var conf = confirm("确定删除这个商品？");
                    if (conf) {
                        this.parentNode.removeChild(this);
                    }
                    break;
                default:
                    break;
            }
            getTotle();
        }
        //处理从手动输入商品数量
        tr[i].getElementsByTagName("input")[1].onkeyup = function(){
            var val = this.value;
            var tr = this.parentNode.parentNode;
            if (isNaN(val) || val < 0 ) {
                val = 1;
            }
            this.value = val;
            getSubTotle(tr);
        }
    }

    //全选删除
    deleteAll.onclick = function(){
        if (selectTotle.innerHTML !="0") {
            var conf = confirm("确定删除这些商品？");
            if (conf) {
                for (var i = 0, len = tr.length; i < len; i++) {
                    var input = tr[i].getElementsByTagName("input")[0];
                    if(input.checked){
                        tr[i].parentNode.removeChild(tr[i]);
                    }
                }
            }
        }       
    }
}

//取消选择--采用事件代理---放到父元素上。

shoppingCart.css

.count_input{
    width: 39px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
}

span.add, span.reduce{
    height: 23px;
    width: 27px;
    border: 1px solid #e5e5e5;
    background: #f0f0f0;
    line-height: 23px;
    color: #444;
}
.closing{
    display: inline-block;
    width: 120px;
    height: 50px;
    line-height: 50px;
    background: #f40;
    text-align: center;
    font-family: 'Microsoft Yahei';
    font-size: 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}
.fr{
    float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
    margin-top: 15px;
}
.footer{
    height: 50px;
    background: #e5e5e5;
    font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
    color: #f40;
    font-weight: 700;
    font-size: 18px;
    font-family: tohoma,arial;
    padding: 5px;

}

查看全文

相关阅读:
STM32F4xx时钟理解
 ubuntu突然卡住
 图像处理的面试问题汇总(6)
更改IOS于UISearchBar撤消button底、搜索输入文本框背景中的内容和UISearchBar底
 PHP于DIRECTORY_SEPARATOR任务
 iOS8使用Core Graphics实现渐变效果-Swift基础教程
 iOS开发系列--打造自己的“美图秀秀”
swiftTools
如何把UIView转成UIImage，解决模糊失真问题
 Android清理内存

原文地址：https://www.cnblogs.com/dingxiaoyue/p/4948231.html