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

Solution to blank page after Vue packaging

1. Solution to the problem that the page is blank...

The principle and implementation of js drag effect

The drag function is mainly used to allow users t...

Use PSSH to batch manage Linux servers

pssh is an open source software implemented in Py...

Tutorial on using the hyperlink tag in HTML

The various HTML documents of the website are con...

Example tutorial on using the sum function in MySQL

Introduction Today I will share the use of the su...

Summary of Vue's monitoring of keyboard events

Key Modifiers When listening for keyboard events,...

How to generate a free certificate using openssl

1: What is openssl? What is its function? What is...

How to use Docker-compose to build an ELK cluster

All the orchestration files and configuration fil...

Mysql case analysis of transaction isolation level

Table of contents 1. Theory SERIALIZABLE REPEATAB...

Tutorial on installing MYSQL5.7 from OEL7.6 source code

First, download the installation package from the...

Sample code for CSS image animation effects (photo frame)

This article introduces the sample code of CSS pi...

Tips for using DIV container fixed height in IE6 and IE7

There are many differences between IE6 and IE7 in ...

js to implement file upload style details

Table of contents 1. Overview 2. Parameters for c...

How to purchase and install Alibaba Cloud servers

1. Purchase a server In the example, the server p...

MySQL query statement grouped by time

MySQL query by year, month, week, day group 1. Qu...