자바스크립트에서 장바구니 효과를 구현하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 장바구니 효과를 구현하는 방법

藏色散人

풀어 주다： 2023-01-11 09:19:14

원래의

7499명이 탐색했습니다.

JavaScript를 사용하여 장바구니 효과를 구현하는 방법: 1. 인터페이스 레이아웃을 위해 테이블을 사용합니다. 2. getClasses 함수를 직접 캡슐화합니다. 3. js를 사용하여 제품 선택 및 전체 선택, 증가 또는 감소와 같은 기능을 구현합니다. 제품 수.

자바스크립트에서 장바구니 효과를 구현하는 방법

이 기사의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

javascript로 장바구니 효과를 얻는 방법은 무엇입니까?

javascript를 이용하여 구현한 장바구니 예시

javascript를 기반으로 구현한 장바구니 예시:

첫 번째는 장바구니 기본 기능으로 아래 그림과 같은 효과와 기능입니다.

포함 사항: 1. 모든 제품 선택 및 선택 2. 제품 수량 증가 또는 감소 3. 개별 제품 가격 계산 5. 제품 삭제

자바스크립트에서 장바구니 효과를 구현하는 방법

1. 인터페이스 레이아웃

은 레이아웃에 테이블을 사용합니다. js를 사용하여 tr 및 td 노드를 얻을 때 첨자 요소 모음을 얻을 수 있어 작업이 더 편리합니다.

html+css 코드는 다음과 같습니다.

<!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="자바스크립트에서 장바구니 효과를 구현하는 방법" >外星人笔记本电脑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="자바스크립트에서 장바구니 효과를 구현하는 방법" >任天堂（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="자바스크립트에서 장바구니 효과를 구현하는 방법" >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="자바스크립트에서 장바구니 효과를 구현하는 방법" >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>

로그인 후 복사

2. 자바스크립트 코드

는 호환성 문제를 피하기 위해 getClasses() 함수 자체를 캡슐화합니다.

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;
}

로그인 후 복사

추천 학습: "javascript 기본 튜토리얼"

위 내용은 자바스크립트에서 장바구니 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!