2. 程式人生 > 程式設計 >js實現購物車加減以及價格計算功能

js實現購物車加減以及價格計算功能

阿新 • • 發佈：2021-08-20

本文例項為大家分享了實現購物車加減以及價格計算的具體程式碼，供大家參考，具體內容如下

需求說明：

1、單擊“半閉”按鈕時，關閉當前頁面購物車頁面
2、單擊“移入收藏”彈出收藏提示
3、單擊“刪除”彈出確認刪除提示
4、單擊“結算”按鈕，彈出結算資訊頁面視窗
5、自動計算商品總計
6、單擊“刪除”按鈕，使用parentNode訪問當前節點的父親節點等，使用removeChild( )刪除當前商品

效果圖：

js實現購物車加減以及價格計算功能

程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善噹噹購物車頁面</title>
    <style type="text/">
     body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,ol{list-style: none;}
.content{width: 810px; margin: 0 auto;  font-family: "微軟雅黑";}
.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: "微軟雅黑";
    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: "微軟雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    /*margin-top: 5px;*/
    /*margin-right: 15px;*/
    cursor: pointer;
    font-weight: bold;}
 
    </style>
</head>
 
<!--onload，在載入時計算好原始金額-->
<body onload="total()">
 
<div class="content">
    <div class="logo">
        <span onclick=":if (confirm('確認要關閉嗎'))window.close() ">關閉</span>
    </div>
    <div class="cartList">
        <ul>
            <li>商品資訊</li>
            <li>商品圖片</li&ghttp://www.cppcns.com
 
t;
            <li>單價（元）</li>
            <li>數量</li>
            <li>金額（元）</li>
            <li>操作</li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center" id="first">
            <li>《平凡的世界》</li>
            <li><img src="./img/1.png" alt="js實現購物車加減以及價格計算功能" 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()">移入收藏</p><p onclick="delete1()">刪除</p></li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>《昆蟲記》</li>
            <li><img src="./img/2.png" alt="js實現購物車加減以及價格計算功能" 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()">移入收藏</p><p onclick="delete1()">刪除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>結算</span></li>
        </ol>
    </div>
</div>
</body>
</html>
 
<script>
    //減法
    function minus(index) {
        //獲取當前數量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一個amount的元素的value屬性的值
        var count=parseInt(amounts[index].value); //數量加1
 
        if (count<=1){
            alert("不能再減了，快沒了！！");
        } else {
            //得到第一個amount的元素的value屬性的值
            var count=parseInt(amounts[index].value)-1; //數量加1
 
            //重新把count的值繫結在數量文字框裡
            amounts[index].value=count;
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因為避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        total();
 
    }
 
    //加法
    function plus(index) {
 
        //獲取當前數量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一個amount的元素的value屬性的值
        var count=parseInt(amounts[index].value)+1; //數量加1
 
        //重新把count的值繫結在數量文字框裡
        amounts[index].value=count;
 
        //當前操作埠的價格也要重新計算
        //得到當前埠的單價
        var prices=document.getElementsByName("pri
 
ce");
        var price=parseFloat(prices[index].value);
        //乘http://www.cppcns.com以Math.pow(10,2)的原因為避免失真
        var totalMoney=((price*Math.pow(10,2);
 
        //把當前價格顯示在文字中
        document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        total();
    }
 
 
    //求總金額
 
    function total() {
 
        //得到所有的數量
        var counts=document.getElementsByName("amount");
 
        //得到所有的單價
        var prices=document.getElementsByName("price");
 
        var sumMoney=0;
 
        for (var i=0;i<counts.length;i++){
 
            //乘以Math.pow(10,2)的原因為避免失真
            sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //把總金額顯示再指定的元素中
        document.getJvKoKrUP
 
ElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //加入收藏
    function save() {
        if (confirm("確認要收藏嗎？")){
            alert("收藏成功！");
        }
 
    }
    //刪除
    function delete1() {
        if (confirm("確認要刪除嗎？")) {
            var del=document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("刪除成功！！");
        }
    }
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

js實現購物車加減以及價格計算功能

本文例項為大家分享了實現購物車加減以及價格計算的具體程式碼，供大家參考，具體內容如下

js實現購物車加減和價格運算

本文例項為大家分享了實現購物車加減和價格運算的具體程式碼，供大家參考，具體內容如下

JS實現簡單加減購物車效果

本文例項為大家分享了實現簡單加減購物車的具體程式碼，供大家參考，具體內容如下

vue實現購物車加減

通常我們會在模板中繫結表示式,模板是用來描述檢視結構的。如果模板中的表示式存在過多的邏輯，模板會變得臃腫不堪，維護變得非常困難。因此，為了簡化邏輯，當某個屬性的值依賴於其他屬性的值時，我們可以使用計算屬

jq簡單實現購物車加減功能

技術標籤：js小功能jquery <style> .num-input { height: 30px; } .num-input button { width: 22px;

js實現購物車商品數量加減

本文例項為大家分享了js實現購物車商品數量加減的具體程式碼，供大家參考，具體內容如下

購物車加減庫存以及多選框的選擇實現改變總價

{__NOLAYOUT__} <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Document</title>

Android 購物車加減功能的實現程式碼

Android 實現購物車加減功能，效果圖如下所示： public class adderView extends LinearLayout implements View.OnClickListener,TextWatcher {

JS實現購物車中商品總價計算

js計算購物車中商品總價，供大家參考，具體內容如下 題目要求： 購物車中有若干商品資訊，其中包括商品的名稱、單價、數量，計算購物車www.cppcns.com中商品的總價。

js實現購物車計算的方法

本文例項為大家分享了實現購物車計算的具體程式碼，供大家參考，具體內容如下

基於vue.js實現購物車

本文例項為大家分享了vue.js實現購物車的具體程式碼，供大家參考，具體內容如下

原生js實現購物車

原生就js實現購物車增刪改查，供大家參考，具體內容如下 效果圖： 程式碼：

原生js實現購物車功能

本文例項為大家分享了js實現購物車功能的具體程式碼，供大家參考，具體內容如下

JS實現購物車基本功能

JS實現購物車商品 加、減、單選、全選、刪除、手動輸入、價格更新等功能，供大家參考，具體內容如下

C語言使用棧實現整數加減乘除運算（不包含括號）

技術標籤：c資料結構 #include <stdio.h> #include <stdlib.h> #define max_size 10 typedef int type;

JQuery案例：購物車加減

技術標籤：jquery JQuery案例：購物車加減 <head> <meta charset="UTF-8">

vue腳手架計數器案例(相當於購物車加減)

技術標籤：學習地址vue <template> <div class="main"> <div class="app">

Vue.js實現購物車基礎功能

技術標籤：vue.js 效果： 程式碼： <!DOCTYPEhtml> <htmllang="en"> <head>

java基礎鞏固__簡單實現一個加減乘除計算器

技術標籤：javajavaswitch 示例程式碼： import java.io.*; import java.util.Scanner; public class test09 {

關於JS小數的加減乘除精度丟失問題

JS在的加減乘除在出現小數計算時，會丟失精度，如：0.1 + 0.2 != 0.3 ，下面是可以完美求出想定的精度的加減乘除方法。