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 commonly used tool functions in Vue projects

Table of contents Preface 1. Custom focus command...

Disabled values ​​that cannot be entered cannot be passed to the action layer

If I want to make the form non-input-capable, I se...

Solve the problem that the time zone cannot be set in Linux environment

When changing the time zone under Linux, it is al...

Analysis of the process of simply deploying nginx in Docker container

1. Deploy nginx service in container The centos:7...

How to check disk usage in Linux

1. Use the df command to view the overall disk us...

A few things you need to know about responsive layout

1. Introduction Responsive Web design allows a we...

Mysql keeps the existing content and adds content later

This command modifies the data table ff_vod and a...

Linux installation apache server configuration process

Prepare the bags Install Check if Apache is alrea...

How to quickly add columns in MySQL 8.0

Preface: I heard a long time ago that MySQL 8.0 s...

Install two MySQL5.6.35 databases under win10

Record the installation of two MySQL5.6.35 databa...

MySQL process control IF(), IFNULL(), NULLIF(), ISNULL() functions

In MySQL, you can use IF(), IFNULL(), NULLIF(), a...

Linux implements the source code of the number guessing game

A simple Linux guessing game source code Game rul...

10 very good CSS skills collection and sharing

Here, clever use of CSS techniques allows you to g...

About the solution record of the page unresponsiveness when using window.print() in React

Table of contents 1. Background of the problem: 2...

Select does not support double click dbclick event

XML/HTML CodeCopy content to clipboard < div c...