JS實現(xiàn)購物車中商品總價計算
更新時間：2021年03月07日 15:11:40 作者：endggl
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)購物車中商品總價的計算 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS計算購物車中商品總價，供大家參考，具體內(nèi)容如下
題目要求：
購物車中有若干商品信息，其中包括商品的名稱、單價、數(shù)量，計算購物車中商品的總價。
具體思路：
商品信息通過創(chuàng)建商品對象來實現(xiàn)，若干商品的加和通過創(chuàng)建數(shù)組來放置若干商品，再通過遍歷數(shù)組讀取指定屬性對價格進(jìn)行計算。
具體代碼：
<script type="text/javascript">
// 總價變量
var sum = 0;
// 商品對象
function Goods(name,price,amount){
this.name = name;
this.price = price;
this.amount = amount;
// this.add = fun();
}
// 定義聲明商品實例
var goods1 = new Goods("鋼筆",100,1);
var goods2 = new Goods("紙巾",10,1);
var goods3 = new Goods("練習(xí)冊",100,2);
// 創(chuàng)建函數(shù)進(jìn)行總價計算
function totalPrice(){
// 將對象放入數(shù)組
var arr = new Array(goods1,goods2,goods3);
// 通過遍歷將各個商品價格進(jìn)行相加
for(var i in arr){
sum = sum + (arr[i].price * arr[i].amount);
};
console.log(sum);
};
console.log(goods1);
console.log(goods2);
console.log(goods3);
totalPrice();
</script>
運行結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
不知道你有木有聽說過一個基于Javascript的Web頁面預(yù)處理器，叫做AbsurdJS。只是打算寫一個CSS的預(yù)處理器，后來擴(kuò)展到了CSS和HTML，可以用來把Javascript代碼轉(zhuǎn)成CSS和HTML代碼。當(dāng)然，由于可以生成HTML代碼，你也可以把它當(dāng)成一個模板引擎，用于在標(biāo)記語言中填充數(shù)據(jù)。2015-05-05
這篇文章主要介紹了微信小程序文章詳情功能,結(jié)合完整實例形式詳細(xì)分析了微信小程序文章詳情功能具體步驟、原理及功能實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
js和jquery判斷數(shù)據(jù)類型的4種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于js和jquery判斷數(shù)據(jù)類型的4種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript實現(xiàn)tab欄切換的幾種常用方法
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)tab欄切換的幾種常用方法,在Web開發(fā)中Tab切換是一個常見的功能,它允許用戶在不同的頁面部分之間進(jìn)行切換,需要的朋友可以參考下2023-12-12
詳解關(guān)閉令人抓狂的ESlint 語法檢測配置方法
這篇文章主要介紹了詳解關(guān)閉令人抓狂的ESlint 語法檢測配置方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了js傳值后臺中文出現(xiàn)亂碼的解決方法,涉及javascript針對中文的編碼及java解碼操作相關(guān)技巧,需要的朋友可以參考下2016-06-06
react-router-dom?v6?通過outlet實現(xiàn)keepAlive?功能的實現(xiàn)
本文主要介紹了react-router-dom?v6?通過outlet實現(xiàn)keepAlive功能，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用js判斷當(dāng)前時區(qū)TimeZone是否是夏令時
這篇文章主要介紹了js判斷當(dāng)前時區(qū)TimeZone是否是夏令時的方法,需要的朋友可以參考下2014-02-02
Ajax 文件上傳進(jìn)度監(jiān)聽之upload.onprogress案例詳解
這篇文章主要介紹了Ajax 文件上傳進(jìn)度監(jiān)聽之upload.onprogress案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09