js implements shopping cart addition and subtraction and price calculation

js implements shopping cart addition and subtraction and price calculation

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

Main functions implemented: addition and subtraction of shopping cart, calculation of price of single item, calculation of total price. Prices are rounded to two decimal places.

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="guan()">Close</span>
    </div>
    <div class="cartList" id="zong">
        <ul>
            <li >¥21.90</li>
            <li><input type="button" name="minus" value="-" onclick="jian()"><input type="text" name="amount" value="1" id="shang"><input type="button" name="plus" value="+" onclick="jia()"></li>
            <li>¥<input type="text" name="price" value="21.90" id="yiqian"></li>
            <li><p onclick="shou()">Move to favorites</p><p onclick="shan()">Delete</p></li>
        </ul>
        <ul>
            <li >¥24.00</li>
            <li><input type="button" name="minus" value="-" onclick="jian1()"><input type="text" name="amount" value="1" id="shang1"><input type="button" name="plus" value="+" onclick="jia1()"></li>
            <li>¥<input type="text" name="price" value="24.00"id="erqian" ></li>
            <li><p onclick="shan()">Move to favorites</p><p onclick="shan()">Delete</p></li>
        </ul>
        <ol>
            <li id="totalPrice" > 0.00</li>
            <li><span onclick="jie()">Checkout</span></li>
        </ol>
    </div>
    <h3 id="shijian">Now is:</h3>
</div>

The above is the html page

The following is the JS script

var price = 0.00;
var price1 = 0.00;
var price2 = 0.00;

function jian() {
    var i = parseInt(document.getElementById("shang").valueOf().value) - 1;
    if (i <= 0) {
        i = 0;
    }
    document.getElementById("shang").valueOf().value = i;
    price1 = 21.90 * i;
    document.getElementById("yiqian").value=suan(price1);
    zong();
}
function jia() {
    var i = parseInt(document.getElementById("shang").valueOf().value) + 1;
    document.getElementById("shang").valueOf().value = i;
    price1 = 21.90 * i;
    document.getElementById("yiqian").value=suan(price1);
    zong();
}
function jian1() {
    var i = parseInt(document.getElementById("shang1").valueOf().value) - 1;
    if (i <= 0) {
        i = 0;
    }
    document.getElementById("shang1").valueOf().value = i;
    price2 = 24.00 * i;
    document.getElementById("erqian").value=suan(price2);
    zong();
}
function jia1() {
    var i = parseInt(document.getElementById("shang1").valueOf().value) + 1;
    document.getElementById("shang1").valueOf().value = i;
    price2 = 24.00 * i;
    document.getElementById("erqian").value=suan(price2);
    zong();
}

function suan(number) {
    price = price1 + price2;
    if (isNaN(number)) {
        return false;
    }
    number = Math.round(number * 100) / 100;
    var s = number.toString();
    var rs = s.indexOf(".");
    if (rs < 0) {
        rs = s.length;
        s += ".";
    }
    while (s.length <= rs + 2) {
        s += "0";
    }
    return s;
}
function zong() {
    price = price1 + price2;
    if (isNaN(price)) {
        return false;
    }
    price = Math.round(price * 100) / 100;
    var s = price.toString();
    var rs = s.indexOf(".");
    if (rs < 0) {
        rs = s.length;
        s += ".";
    }
    while (s.length <= rs + 2) {
        s += "0";
    }
    document.getElementById("totalPrice").innerHTML=s;
}

The most basic method is used, which is easy for beginners to understand, especially those who have shortcomings in knowledge, they can basically understand it.

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 realizes shopping cart addition and subtraction and price calculation functions
  • 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

<<:  How to create (CREATE PROCEDURE) and call (CALL) a MySQL stored procedure and how to create (DECLARE) and assign (SET) a variable

>>:  Detailed tutorial on deploying Django project under CentOS

Recommend

Analysis of MySQL concurrency issues and solutions

Table of contents 1. Background 2. Slow query cau...

Detailed explanation of this pointing problem in JavaScript function

this keyword Which object calls the function, and...

How to query date and time in mysql

Preface: In project development, some business ta...

MYSQL METADATA LOCK (MDL LOCK) theory and lock type test

Table of contents MYSQL METADATA LOCK (MDL LOCK) ...

Detailed explanation of how to gracefully delete a large table in MySQL

Preface To delete a table, the command that comes...

Small problem with the spacing between label and input in Google Browser

Code first, then text Copy code The code is as fol...

Detailed steps to change the default password when installing MySQL in Ubuntu

Step 1: Enter the directory: cd /etc/mysql, view ...

What is ZFS? Reasons to use ZFS and its features

History of ZFS The Z File System (ZFS) was develo...

How to view and clean up Docker container logs (tested and effective)

1. Problem The docker container logs caused the h...

Analysis and summary of the impact of MySQL transactions on efficiency

1. Database transactions will reduce database per...

Summary of pitfalls of using nginx as a reverse proxy for grpc

background As we all know, nginx is a high-perfor...

Image scrolling effect made with CSS3

Achieve resultsImplementation Code html <base ...

Mysql method to copy a column of data in one table to a column in another table

mysql copy one table column to another table Some...