js realizes shopping cart addition and subtraction and price calculation functions

js realizes shopping cart addition and subtraction and price calculation functions

This article shares the specific code of js to realize shopping cart addition and subtraction and price calculation for your reference. The specific content is as follows

Requirements:

1. When you click the "half-close" button, close the current shopping cart page
2. Click "Move to Favorites" to pop up the collection prompt
3. Click "Delete" to pop up a prompt to confirm deletion
4. Click the "Settlement" button and the settlement information page window will pop up.
5. Automatically calculate product totals
6. Click the "Delete" button, use parentNode to access the parent node of the current node, and use removeChild() to delete the current product.

Effect picture:

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Improve Dangdang shopping cart page</title>
    <style type="text/css">
     body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto; font-family: "Microsoft YaHei";}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    /*background: url("../image/02.jpg") no-repeat;*/
    /*height: 414px;*/
    overflow: hidden;
}
.cartList ul{
    display: flex;
    justify-content: space-between;
    /*float: right;*/
    /*width: 450px;*/
}
.cartList ul:nth-of-type(1){
    display: flex;
    margin-top: 125px;
}
.cartList ul:nth-of-type(2){
    margin: 20px 0;
}
.cartList ul li{
    font-family: "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    /*float: left;*/
}
.cartList ul li input[name="price"]{
    border: none;
    background: transparent;
    width: 45px;
    text-align: center;
}
.cartList ul li input[name="amount"]{
    width: 45px;
    text-align: center;
    border: 1px solid #999999;
    border-left: none;
    border-right: none;
    height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
    height: 25px;
    border: 1px #999999 solid;
    width: 25px;
    text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
    float: right;
    clear: both;
    margin-top: 40px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
.cartList ol li span{display: inline-block;
    float: right;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    /*margin-top: 5px;*/
    /*margin-right: 15px;*/
    cursor: pointer;
    font-weight: bold;}
 
    </style>
</head>
 
<!--onload, calculate the original amount when loading-->
<body onload="total()">
 
<div class="content">
    <div class="logo">
        <span onclick="javascript:if (confirm('Are you sure you want to close?'))window.close()">Close</span>
    </div>
    <div class="cartList">
        <ul>
            <li>Product information</li>
            <li>Product images</li>
            <li>Unit price (yuan)</li>
            <li>Quantity</li>
            <li>Amount (Yuan)</li>
            <li>Operation</li>
        </ul>
        <ul style="display: flex; justify-content: space-between; align-items: center" id="first">
            <li>Ordinary World</li>
            <li><img src="./img/1.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
            <li id="price0">¥21.90</li>
            <li><p onclick="save()">Add to favorites</p><p onclick="delete1()">Delete</p></li>
        </ul>
        <ul style="display: flex; justify-content: space-between; align-items: center; margin: 20px 0;">
            <li>《Insect Life》</li>
            <li><img src="./img/2.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">¥24.00</li>
            <li><p onclick="save()">Add to favorites</p><p onclick="delete1()">Delete</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>Settlement</span></li>
        </ol>
    </div>
</div>
</body>
</html>
 
<script>
    //Subtraction function minus(index) {
        //Get the current amount var amounts=document.getElementsByName("amount");
 
        //Get the value of the value attribute of the first amount elementvar count=parseInt(amounts[index].value); //The number plus 1
 
        if (count<=1){
            alert("Can't reduce it anymore, it's almost gone!!");
        } else {
            //Get the value of the value attribute of the first amount elementvar count=parseInt(amounts[index].value)-1; //The number plus 1
 
            //Rebind the count value to the quantity text box amounts[index].value=count;
            var prices = document.getElementsByName("price");
            var price = parseFloat(prices[index].value);
            //The reason for multiplying by Math.pow(10,2) is to avoid distortion var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        total();
 
    }
 
    //addition function plus(index) {
 
        //Get the current amount var amounts=document.getElementsByName("amount");
 
        //Get the value of the value attribute of the first amount elementvar count=parseInt(amounts[index].value)+1; //The number plus 1
 
        //Rebind the count value to the quantity text box amounts[index].value=count;
 
        //The price of the current operating port also needs to be recalculated //Get the unit price of the current port var prices=document.getElementsByName("price");
        var price = parseFloat(prices[index].value);
        //The reason for multiplying by Math.pow(10,2) is to avoid distortion var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //Display the current price in the text document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        total();
    }
 
 
    //Calculate the total amountfunction total() {
 
        //Get all the quantities var counts = document.getElementsByName("amount");
 
        //Get all unit prices var prices=document.getElementsByName("price");
 
        var sumMoney=0;
 
        for (var i=0;i<counts.length;i++){
 
            //The reason for multiplying by Math.pow(10,2) is to avoid distortion sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //Display the total amount in the specified element document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //Add to favorites function save() {
        if (confirm("Are you sure you want to save it?")){
            alert("Successful collection!");
        }
 
    }
    //delete function delete1() {
        if (confirm("Are you sure you want to delete?")) {
            var del = document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("Deleted successfully!!");
        }
    }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js implements shopping cart addition and subtraction and price calculation
  • js to add and subtract the number of items in the shopping cart
  • How to add product components to vue.js shopping cart
  • Implementing the Add to Cart Effect Based on JavaScript with Source Code Download
  • JS implements simple addition and subtraction of shopping cart effects

<<:  Tutorial on installing MySQL 8.0.11 under Linux

>>:  A brief analysis of SpringBoot packaging and uploading to docker and implementing multi-instance deployment (IDEA version)

Recommend

Summary of some situations when Docker container disk is full

Preface This article describes two situations I h...

How to use Vue to develop public account web pages

Table of contents Project Background start Create...

Detailed explanation of box-sizing in CSS3 (content-box and border-box)

Box-sizing in CSS3 (content-box and border-box) T...

Let you understand the working principle of JavaScript

Table of contents Browser kernel JavaScript Engin...

Pitfalls based on MySQL default sorting rules

The default varchar type in MySQL is case insensi...

Detailed explanation of CSS line-height and height

Recently, when I was working on CSS interfaces, I...

How to implement web stress testing through Apache Bench

1. Introduction to Apache Bench ApacheBench is a ...

How to assign default values ​​to fields when querying MySQL

need When querying a field, you need to give the ...

Detailed explanation of vue.js dynamic components

:is dynamic component Use v-bind:is="compone...

Detailed explanation of React setState data update mechanism

Table of contents Why use setState Usage of setSt...

The image element img has extra blank space in IE6

When doing DIV+CSS layout of the page, it is very...

Command to view binlog file creation time in Linux

Table of contents background analyze method backg...

Vue3.0 implements the encapsulation of the drop-down menu

Vue3.0 has been out for a while, and it is necess...

Nginx domain name SSL certificate configuration (website http upgraded to https)

Preface HTTP and HTTPS In our daily life, common ...

Implementation of docker-compose deployment project based on MySQL8

1. First, create the corresponding folder accordi...