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
Table of contents 1. Background 2. Slow query cau...
this keyword Which object calls the function, and...
The shutdown.bat file has a sentence if not "...
Generally, during the development process, the su...
Preface: In project development, some business ta...
Table of contents MYSQL METADATA LOCK (MDL LOCK) ...
Preface To delete a table, the command that comes...
Code first, then text Copy code The code is as fol...
Step 1: Enter the directory: cd /etc/mysql, view ...
History of ZFS The Z File System (ZFS) was develo...
1. Problem The docker container logs caused the h...
1. Database transactions will reduce database per...
background As we all know, nginx is a high-perfor...
Achieve resultsImplementation Code html <base ...
mysql copy one table column to another table Some...