本文目錄一覽:
- 1、JS代碼 做一個簡易的購物車 效果圖如下
- 2、請教JavaScript中 怎麼讓購物車的總計價格變化?
- 3、用javascript怎樣計算購物車價格
- 4、幫我改一個JS代碼謝謝,購物車數字1的時候不能減到0,現在還能減到0
- 5、無刷新修改購物車產品數量得總金額的js代碼
- 6、一些電商網站在加入購物車和結算的時候鏈接顯示JavaScript:void(0),為什麼要用js來進行提交?
JS代碼 做一個簡易的購物車 效果圖如下
樓主是想要點擊合計就是出數值還是什麼?如果說點擊合計就算出值的話如下
table width=”400″ border=”1″
tr
th rows=”5″簡易購物車/th
/tr
tr
td商品名稱/td
td數量(件)/td
td單價(美元)/td
td運費(美元)/td
tdbutton onclick=”fun()”合計/button/td
/tr
tr
tdinput type=”text” name=”goodsName” //td
tdinput type=”text” name=”num” id=”num” //td
tdinput type=”text” name=”price” id=”price” //td
tdinput type=”text” name=”freight” id=”freight” //td
tdinput type=”text” name=”total” id=”total” //td
/tr
/table
script
function fun(){
var num = document.getElementById(“num”).value;
var price = document.getElementById(“price”).value;
var freight = parseInt(document.getElementById(“freight”).value);
var total = (price * num) + freight;
document.getElementById(“total”).value = total;
}
/script
請教JavaScript中 怎麼讓購物車的總計價格變化?
一般有兩種做法。
一種是
在頁面加載完畢後,先初始化一次總金額。
在調用添加、減少方法時,獲取總金額的值然後加上或減去物品*數量的值
另一種就是
同樣先初始化總金額
在調用添加、減少方法後,直接重新計算所有price的值然後給總金額賦值。
“`js
function updateTotalPrice() {
let count= 0
const priceNodes = document.querySelectorAll(“li input[name=’price’]”)
priceNodes.forEach(node = {
count+= parseFloat(node.value) * 100
})
document.querySelector(“#totalPrice”).innerHTML = count/ 100
}
“`
用javascript怎樣計算購物車價格
/*計算總價格*/
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById(“quantity”+a).value;
var price=document.getElementById(“price”+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
}
var total=document.getElementById(“total”);
total.innerHTML=totalPrice;
}
/script
script type=”text/javascript”
function initialize()
{
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById(“quantity”+a).value;
var price=document.getElementById(“price”+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
/*alert(smallTotal);*/
var smallT=document.getElementById(“smallTotal”+a);
smallT.innerHTML=smallTotal;
}
/*取出購物車的所有商品的價格總和*/
var total=document.getElementById(“total”);
total.innerHTML=totalPrice;
}
/script
style type=”text/css”
#imgtest {
position: absolute;
top: 100px;
left: 400px;
z-index: 1;
}
table {
left: 100px;
font-size: 20px;
}
/style
/head
body onload=”initialize()”
div id=”imgtest”/div
br /
br /
table border=”1″ style=”text-align: center;” align=”center”
thead style=”height: 50″
td style=”WIDTH: 300px”
商品名稱
/td
td style=”WIDTH: 60px”
圖片
/td
td style=”WIDTH: 170px”
數量
/td
td style=”WIDTH: 170px”
價格
/td
td style=”WIDTH: 250px”
小計
/td
/thead
tbody
tr
td class=”name”商品1/td
td class=”image”
img src=”1.jpg” width=”40px” height=”40px” id=”image1″ /
/td
td class=”quantity”
input id=”quantity1″ value=”1″ onblur=”total(1);” /
/td
td class=”price”
input type=”hidden” id=”price1″ value=”20″ /
20
/td
td class=”total”
span id=”smallTotal1″/span 元
/td
/tr
tr
td class=”name”商品2/td
td class=”image”
img src=”1.jpg” width=”40px” height=”40px” id=”image1″ /
/td
td class=”quantity”
input id=”quantity2″ value=”2″ onblur=”total(2);” /
/td
td class=”price”
input type=”hidden” id=”price2″ value=”30″ /
30
/td
td class=”total”
span id=”smallTotal2″/span 元
/td
/tr
tr
td colspan=”4″ class=”cart_total”
br
/td
td
span class=”red”總計:/spanspan id=”total”/span 元
/td
/tr
/tbody
/table
/body
/html
幫我改一個JS代碼謝謝,購物車數字1的時候不能減到0,現在還能減到0
我覺得應該大概是這樣:
if(operat==1){
//加1處理…
}
else{
if (num = 1) return false;
//減1處理…
}
無刷新修改購物車產品數量得總金額的js代碼
用你給的代碼基礎上用了一個最簡單的js計算,數量是鍵盤輸入,也可以在左右兩側加上自增減的操作,望採納!
table width=”500″ border=”0″ cellpadding=”5″ cellspacing=”0″
trtd數量/tdtd單價/td/tr
tr
tdinput type=”text” id=”num” value=”1″ size=”5″ onchange=”setTotal();”//td
tdspan id=”fare”6.00/span元/td
/tr
tr
td /td
td總金額:¥:span id=”total_Price”6/span.00/td
/tr
/table
p數量那裡最好能鍵盤輸入,不然買100件就有的點了。麻煩再給看看哈/p
script type=”text/JavaScript”
function setTotal(){
var fare=document.getElementById(“fare”).innerHTML;
//alert(fare);
var num=document.getElementById(“num”).value;
if(/\D/.test(num)){//檢查用戶輸入的值是否是數字
alert(“請您輸入正確的數量!”);
document.getElementById(“total_Price”).innerHTML=”0″
}else{
document.getElementById(“total_Price”).innerHTML=parseFloat(fare*num);
}
}
/script
一些電商網站在加入購物車和結算的時候鏈接顯示JavaScript:void(0),為什麼要用js來進行提交?
為了更好的用戶體驗和安全方面的考慮. 在加入購物車的時候, 一般是用ajax做的, 那麼如果不用ajax做的話, 你點擊加入購物車, 那麼就直接跳到購物車界面去了, 這對用戶體驗其實並不好, 因為用戶可能還想逛逛, 還想買東西.
結算的時候也是使用ajax, 為什麼, 因為結算頁面並不是死的頁面, 有可能用戶還要調一下商品數量啊, 再選一下款式啊什麼的, 這個時候你用ajax在本頁面進行數據的交換 , 就比不停的刷新頁面要好的多.
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/233863.html