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

What are the benefits of using // instead of http:// (adaptive https)

//Default protocol /The use of the default protoc...

Common naming rules for CSS classes and ids

Public name of the page: #wrapper - - The outer e...

Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS W...

How to implement DIV's blur function

Use anti-shake to make DIV disappear when the mou...

Detailed explanation of various methods of Vue component communication

Table of contents 1. From father to son 2. From s...

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

MySQL Advanced Learning Notes (Part 3): Introduction to MySQL Logical Architecture, Detailed Explanation of MySQL Storage Engine

Introduction to MySQL logical architecture Overvi...

A brief discussion on mysql backup and restore for a single table

A. Installation of MySQL backup tool xtrabackup 1...

Simple implementation of Mysql add, delete, modify and query statements

Simple implementation of Mysql add, delete, modif...

Use neat HTML markup to build your pages

The Internet is an organism that is constantly ev...

How to import and export Cookies and Favorites in FireFox

FireFox is a commonly used browser with many exte...

Solution for Docker container not recognizing fonts such as Songti

Problem background: When using docker to deploy t...

25 Tools to Improve Website Usability and Conversion Rates

For a website, usability refers to whether users c...

MySQL transaction, isolation level and lock usage example analysis

This article uses examples to describe MySQL tran...

Docker Compose installation and usage steps

Table of contents 1. What is Docker Compose? 2. D...