Comment implémenter l'effet panier en javascript-js tutoriel-php.cn

Comment implémenter l'effet panier en javascript

藏色散人

Libérer： 2023-01-11 09:19:14

original

7428 Les gens l'ont consulté

Comment implémenter l'effet panier à l'aide de JavaScript : 1. Utilisez un tableau pour la disposition de l'interface ; 2. Encapsulez la fonction getClasses par vous-même ; 3. Utilisez js pour implémenter des fonctions telles que la sélection et la sélection totale des produits, ainsi que l'augmentation ou la diminution de la valeur. nombre de produits.

Comment implémenter l'effet panier en javascript

L'environnement d'exploitation de cet article : système windows7, javascript version 1.8.5, ordinateur DELL G3

Comment obtenir l'effet panier avec javascript ?

Un exemple de panier d'achat implémenté en utilisant javascript

Un exemple de panier d'achat implémenté en fonction de javascript :

Le premier est l'effet et la fonction, comme le montre la figure ci-dessous, avec les fonctions de base d'un panier d'achat.

Comprenant 1. Sélection et sélection de tous les produits ; 2. Augmentation ou diminution de la quantité de produits ; 3. Calcul des prix des produits individuels ; 4. Calcul du prix total ;

Comment implémenter leffet panier en javascript

1. La disposition de l'interface

utilise un tableau pour la mise en page Lorsque vous utilisez js pour obtenir des nœuds tr et td, vous pouvez obtenir une collection d'éléments indicés, ce qui est plus pratique à utiliser. Le code

html+css est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        *{margin:0px; padding:0px;}
        table,td,td{
            border:1px solid #000000;
            font-size:10px;
        }
        table{
            display: block;
        }

        img{
            float:left;
        }
        tr{
            text-align: center;
        }
        #box{
            width:900px;
        }

        #cart{
            float:left;
            border-collapse:collapse;
        }
        #head{
            background:#F0FFFF;
        }
        #settlement{
            margin-top:20px;
            width:805px;
            height:30px;
            border:1px solid #EBEBEB;
            float:left;
            background: #EBEBEB;

            font-size:10px;
            line-height:30px ;
        }
        #settlement div{
            float:left;
        }
        #addupto{
            color:#ff0000;
            font-weight:700;
        }
        #NumofGoods{
            color:#ff0000;
            font-weight:700;
        }

        .goods{
            padding:5px;
            text-align: left;
        }
        .number{
            position:relative;
            left:19px;
            width:60px;
            height:10px;
            border:1px solid #cccccc;
        }

        .acc{
            width:40px;
            height:10px;
            border-left:0px solid #cccccc;
            border-right:0px solid #cccccc;
            line-height: 10px;
            float:left;
        }
        .desymbol{
            width:10px;
            height:10px;
            line-height: 10px;
            background:#ccc;
            float:left;
            cursor:pointer;
        }
        .adsymbol{
            width:10px;
            height:10px;
            line-height: 10px;
            background:#ccc;
            float:right;
            cursor: pointer;
        }
        /*.dele{
            cursor: pointer;
        }*/
        .total{
            color:#ff0000;
            font-weight:700;
        }
    </style>
</head>
<body>
<div id="box">
    <table id="cart">
        <tr id="head">
            <td width="50px"><input type="checkbox">  全选</td>
            <td width="400px;">商品</td>
            <td width="100px">单价</td>
            <td width="100px">数量</td>
            <td width="100px">小计</td>
            <td width="50px">操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img  src="img/goods1.jpg" alt="Comment implémenter l'effet panier en javascript" >外星人笔记本电脑17 R4 15R3 13寸 17寸 alienware今晚吃鸡游戏本</td>
            <td>12888.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img  src="img/goods2.jpg" alt="Comment implémenter l'effet panier en javascript" >任天堂（Nintendo）Switch 家用游戏机 掌机NS智能体感游戏主机</td>
            <td>2258.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img  src="img/goods3.jpg" alt="Comment implémenter l'effet panier en javascript" >Microsoft/微软 Surface Pro i5 8G 256G 笔记本平板电脑二合一</td>
            <td>4999.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img  src="img/goods4.jpg" alt="Comment implémenter l'effet panier en javascript" >Apple/苹果 10.5 英寸 iPad Pro</td>
            <td>3666.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>删除</td>
        </tr>
    </table>

    <div id="settlement">
        <div style="width:550px"><input type="checkbox">    全选</div>
        <div style="width:120px">全选商品<span id="NumofGoods"></span><span>件^</span></div>
        <div style="width:80px">合计：¥<span id="addupto"></span></div>
        <div style="width:50px;text-align: center;border-left:1px solid #000000;">结算</div>
    </div>

</div>

<script src="cart.js"></script>
</body>
</html>

Copier après la connexion

2. Le code javascript

encapsule la fonction getClasses() par lui-même pour éviter les problèmes de compatibilité.

var prices = getClasses("price"),
    cart = document.getElementById("cart");
    acc = getClasses("acc"),
    totals = getClasses("total"),
    detracts = getClasses("desymbol"),
    adds = getClasses("adsymbol"),
    NumofGoods = document.getElementById("NumofGoods"),
    addupto = document.getElementById("addupto"),
    allSelect = getClasses("allSelect"),
    select = getClasses("select"),
    dele = getClasses("dele");

count();
countAll();

for(var i=0; i<allSelect.length; i++ ){
    allSelect[i].onclick = function(){
        for(var j=0; j<select.length; j++){
            select[j].checked = this.checked;
        }
        for(j=0; j<allSelect.length; j++){
            allSelect[j].checked = this.checked;
        }
        //每次点击选框就计算一次总价
        countAll();
    }
}

for(i=0; i<select.length; i++){
    select[i].onclick = function(){
        if(ifAllSelected()){
            for(j=0; j<allSelect.length; j++){
                allSelect[j].checked = true;
            }
        }
        if(ifNotAllSelected()){
            for(j=0; j<allSelect.length; j++){
                allSelect[j].checked = false;
            }
        }
        countAll();
    }
}

for(i=0; i<adds.length; i++){

    adds[i].onclick = function(){
        console.log(this.parentNode.childNodes[3].innerHTML);
        var num = parseInt(this.parentNode.childNodes[3].innerHTML);
        num += 1;
        this.parentNode.childNodes[3].innerHTML = num;
        count();
        countAll();
    }
    detracts[i].onclick = function(){
        var num = parseInt(this.parentNode.childNodes[3].innerHTML);
        num -= 1;
        if(num<1){
            num=1;
        }
        this.parentNode.childNodes[3].innerHTML = num;
        count();
        countAll();
    }
    //删除时也应该重新计算总价，或者先判断商品是否被选中，有选中则重新计算
    dele[i].onclick = function(){
        cart.childNodes[1].removeChild(this.parentNode);
        countAll();
    }
}

//避免兼容性问题，自行封装classname
function getClasses(className){
    var arr = [],
        nodes = document.getElementsByTagName("*");
    for(var i=0; i<nodes.length; i++){
        if(nodes[i].className == className){
            arr.push(nodes[i]);
        }
    }
    return arr;
}

//进行单价的计算，保留两位小数
function count(){
    for(var i=0; i<prices.length; i++){
        totals[i].innerHTML = (prices[i].innerHTML*acc[i].innerHTML).toFixed(2);
    }
}
//计算总价的函数
function countAll(){
    var num1=0;
    var num2=0;
    //注意，每次计算总价应该重新取得一次select,acc和totals，因为执行删除操作时，会让这几个值发生变化
    var select = getClasses("select"),
        acc = getClasses("acc"),
        totals = getClasses("total");
    for(var i=0; i<select.length; i++){
        if(select[i].checked == true){
            num1 += parseInt(acc[i].innerHTML);
            num2 += parseFloat(totals[i].innerHTML);
        }
    }
    NumofGoods.innerHTML = num1;
    addupto.innerHTML = num2;
}

//判断是否全部选中或者全部没有选中的函数
function ifAllSelected(){
    var allSelected = true;

    for(var i=0; i<select.length; i++){
        if(select[i].checked == false){
            allSelected = false;
        }
    }
    return allSelected;
}
function ifNotAllSelected(){
    var notAllSelected = false;
    for(var i=0; i<select.length; i++){
        if(select[i].checked == false){
            notAllSelected = true;
        }
    }
    return notAllSelected;
}

Copier après la connexion

Etude recommandée : "Tutoriel de base javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!