當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html中购物车总金怎么算额,计算购物车金额总和（ jquery ）

發布時間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 html中购物车总金怎么算额,计算购物车金额总和（ jquery ）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天簡單寫了一個jq版購物車計算金額總和的例子，如圖：

整體頁面代碼如下：

list-style: none;

}

html,body{

margin: 0;

padding: 0;

}

.all-list{

padding: 40px;

margin: 0 auto;

}

.choose-list{

overflow: hidden;

}

.choose-list >h5{

display: block;

font-size: 14px;

color: #666666;

padding: 13px 0;

font-weight: normal;

}

.choose-container{

overflow: hidden;

border: 1px solid #DDDDDD;

box-sizing: border-box;

}

.choose-header{

overflow: hidden;

background-color: #F9FAFB;

padding: 0 48px;

}

.choose-header ul{

overflow: hidden;

}

.choose-header ul li{

float: left;

width: 20%;

text-align: center;

padding: 15px 0;

font-size: 12px;

color: #666666;

}

.choose-content{

padding: 0 48px;

overflow: hidden;

}

.choose-content ul{

overflow: hidden;

}

.choose-content ul li{

float: left;

width: 20%;

text-align: center;

padding: 15px 0;

line-height: 28px;

color: #555555;

}

.add-number{

overflow: hidden;

display: inline-block;

}

.choose-content ul li .number-input{

float: left;

width: 70px;

height: 28px;

border-top: 1px;

border-bottom: 1px;

border-color: #CCCCCC;

border-style: solid none;

box-sizing: border-box;

line-height: 28px;

outline: none;

text-align: center;

color: #FE5200;

}

.choose-content ul li .minus,.choose-content ul li .add{

float: left;

width: 28px;

height: 28px;

background-color: #F9FAFB;

font-size: 14px;

outline: none;

border: 1px solid #CCCCCC;

box-sizing: border-box;

}

.choose-content ul li >span{

color: #FE5200;

}

.choose-footer{

display: flex;

justify-content: space-between;

padding: 28px 48px;

background-color: #F9FAFB;

}

.choose-footer .require{

color: #FE5200;

font-size: 14px;

align-self: center;

}

.total-price{

overflow: hidden;

}

.total-price >span{

display: block;

font-size: 14px;

color: #555555;

padding: 6px 0;

}

.total-price >span em{

font-style: initial;

text-decoration:line-through;

}

.total-price >span i{

font-style: initial;

}

.prices{

color: #EA4335 !important;

}

.pay-button{

padding: 50px 0;

float: right;

}

.pay-num{

overflow: hidden;

display: flex;

flex-direction: column;

}

.pay-num span{

float: right;

width: 100%;

font-size: 14px;

color: #666666;

text-align: center;

padding-bottom: 20px;

}

.pay-num span small{

font-size: 18px;

color: #EA4335;

}

.pay-num button{

float: right;

padding: 15px 72px;

background-color: #bebebe;

border: none;

outline: none;

font-size: 14px;

color: #ffffff;

border-radius: 3px;

cursor: not-allowed;

}

.pay-num button.state-buys{

background-color: #EA4335;

cursor: default;

}

確認訂單消息:

會員卡
原價
現價
數量
小計

180天會員卡
￥128
￥99
-
+
￥99

365天會員卡
￥228
￥199
-
+
￥199

730天會員卡
￥428
￥329
-
+
￥329

終身天會員卡
￥888
￥666
-
+
￥666

購買要求：單筆交易需要超過300元

應支付：128

折后支付：99

應付金額：￥49元

立即開通

$(function(){

addMoney();

//增加按鈕事件

$(document).on('click','.add-number .add',function(){

var _input = $(this).siblings('.number-input');

$(this).siblings('.number-input').val(parseInt(_input.val()) + 1);

addMoney();

});

//減少按鈕事件

$(document).on('click','.add-number .minus',function(){

var _input = $(this).siblings('.number-input');

var _val = parseInt(_input.val()) - 1;

if(_val <0){

$(this).siblings('.number-input').val('0');

}else{

$(this).siblings('.number-input').val(_val);

}

addMoney();

});

//input 輸入事件

$('.number-input').keyup(function(){

addMoney();

});

//input失焦事件

$('.number-input').blur(function(){

var this_val = $(this).val();

if(this_val == '' || this_val == 'undefind'){

$(this).val('0');

}else{

$(this).val(this_val);

}

});

//金額計算

function addMoney(){

var now_total = 0,

old_total= 0;

$('.choose-content ul').each(function(index){

var oldPrice = $(this).find('.old-price').attr('data-price');

var nowPrice = $(this).find('.now-price').attr('data-price');

var numbers = $(this).find('.number-input').val();

var old_price_total = oldPrice * numbers;

var now_price_total = nowPrice * numbers;

// console.log(old_price_total,now_price_total);

if(now_price_total == 0){

$(this).find('.now-total-price').html(now_price_total);

}else{

$(this).find('.now-total-price').html('￥' + now_price_total);

}

now_total += now_price_total;

old_total += old_price_total;

$('.total-price span em').html(old_total);

$('.total-price span i').html(now_total);

$('.pay-num span small').html('￥' + now_total + '元');

if(now_total >= 300){

$('.pay-num button').addClass('state-buys');

}else{

$('.pay-num button').removeClass('state-buys');

}

})

}

})

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html中购物车总金怎么算额,计算购物车金额总和（ jquery ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。