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:
|
>>: Detailed tutorial on deploying Django project under CentOS
1. Solution to the problem that the page is blank...
The drag function is mainly used to allow users t...
pssh is an open source software implemented in Py...
The various HTML documents of the website are con...
Introduction Today I will share the use of the su...
Key Modifiers When listening for keyboard events,...
1: What is openssl? What is its function? What is...
All the orchestration files and configuration fil...
Table of contents 1. Theory SERIALIZABLE REPEATAB...
First, download the installation package from the...
This article introduces the sample code of CSS pi...
There are many differences between IE6 and IE7 in ...
Table of contents 1. Overview 2. Parameters for c...
1. Purchase a server In the example, the server p...
MySQL query by year, month, week, day group 1. Qu...