溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹js如何實(shí)現(xiàn)簡單購物車模塊，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
具體內(nèi)容如下
輸入框正則判斷，兩位數(shù)小數(shù)，開頭可以為0
如果商品名字相同，自動數(shù)量+1，如果名字相同，價(jià)格不同，以最新價(jià)格為準(zhǔn)（有bug，多個(gè)商品無法操作。程序混亂，隨后在改）
選住商品，或添加減少數(shù)量，都會自動更新右下角的價(jià)格和數(shù)量
結(jié)算過的商品自動消失
1.html
<body> <div id="head" align="center"> <form> <span class="font1">名稱：</span><input type="text" id="name"> <span class="font1">單價(jià)：</span><input type="text" id="price"> <input id="add1" type="button" value="添加"> <input id="pay1" type="button" value="結(jié)算"> <input id="set1" type="reset" value="重置"> </form> </div> <div> <table border="1" id="t" > <thead> <tr align="center"> <td><input type="checkbox" style='cursor: pointer'></td> <td>商品名稱</td> <td>價(jià)格</td> <td>數(shù)量</td> <td>操作</td> </tr> </thead> <tbody> </tbody> </table> </div> <div align="right" id="b"> <span>總價(jià)：</span> <span id="Total" >0</span> <span>商品數(shù)量：</span> <span id="TotalNum" >0</span> </div> </body>
2.css
<style>
body{
background-color: coral;
}
#head{
margin:30px auto 10px auto;
}
#name,#price{
background-color: aquamarine;
}
#add1,#pay1,#set1{
color: red;
font-weight: bold;
background-color: gold;
cursor: pointer;
}
.font1{
font-weight: bold;
font-size: large;
}
#t,#b{
border-collapse: collapse;
margin: 30px auto;
width: 600px;
}
#t thead{
border: 3px solid gold;
color: white;
background-color: blue;
}
#t tbody{
color: #1414bf;
background-color: white;
}
</style>js部分
<script src="../lib/jquery-3.3.1.js"></script>
<script>
//初始化按鈕
function initButton(){
$("input[name=j1]").off();
$("input[name=x1]").off();
//添加數(shù)量按鈕
$("input[name=j1]").on("click", function (){
var num = parseInt($(this).prev().val());
if (num > 1){
$(this).prev().prev().attr("disabled",false);
}
if (num > 9){
$(this).attr("disabled","disabled");
return;
}
num++;
if (num > 1){
$(this).prev().prev().attr("disabled",false);
}
if (num > 9){
$(this).attr("disabled","disabled");
}
$(this).prev().val(num);
$("#Total").text(cal());
$("#TotalNum").text(calNum());
}
)
//減少數(shù)量按鈕
$($("input[name=x1]")).click(function (){
var num = parseInt($(this).next().val());
if (num-1 < 10){
$("#add1").prop("disabled",false);
}
num--;
if (num < 10){
$(this).next().next().prop("disabled",false);
}
if (num == 1){
$(this).prop("disabled","disabled");
}
$(this).next().val(num);
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//初始化刪除
function initdelete(){
$(".delete").on("click",function (){
$(this).parent().parent().remove();
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//全選或全不選功能
$("thead input[type=checkbox]").on("click",function (){
$("tbody input[type=checkbox]").each(function (index,element){
$(this).prop("checked",$("thead input[type=checkbox]").prop("checked"));
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
})
//初始化每個(gè)選框選中的方法
function initCheckBox(){
$("tbody input[type=checkbox]").off();
$("tbody input[type=checkbox]").on("change",function (){
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//計(jì)算總價(jià)
function cal(){
var price = null;
$("tbody input[type=checkbox]:checked").each(function (){
var priceByOne = parseFloat($(this).parent().next().next().text());
var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val());
var totalMoneyByone = priceByOne * num;
price+= totalMoneyByone ;
});
return price;
}
//計(jì)算總的數(shù)量
function calNum(){
var totalNum = null;
$("tbody input[type=checkbox]:checked").each(function (){
var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val());
totalNum+=num;
});
return totalNum;
}
//結(jié)算
$("#pay1").on("click",function (){
alert("一共消費(fèi)："+cal());
$("thead input[type=checkbox]:checked").prop("checked",false);
$("tbody input[type=checkbox]:checked").parent().parent().remove();
});
//添加
$("#add1").on("click",function (){
var name = $("#name").val();
var price = $("#price").val();
var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
if ((name == "" || price == "") ||(!priceZ.test(price)) ){
alert("輸入錯(cuò)誤！");
}else {
var GameArr = [];
var flag = false;
var repeat = null;
//得到名字?jǐn)?shù)組
$("tbody").each(function (){
var finds = $(this).find(".goodsName");
for (let i = 0; i < finds.length; i++) {
GameArr.push(finds.eq(i).text());
}
});
for (let i = 0; i < GameArr.length; i++) {
if (name == GameArr[i]){
repeat = i;
flag = true;
break;
}}
//如果有相同名字，改數(shù)量和價(jià)格
if (flag == true){
var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1;
if (totalNum > 9){
$(this).attr("disabled","disabled");
}
$("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum);
$("tbody:eq(" + repeat + ")").find(".goodsPrice").text(price);
//否則拼接表格
}else {
var goods = "<tr>"+
"<td><input type='checkbox' style='cursor: pointer'></td>"+
"<td class='goodsName'>"+name+"</td>"+
"<td class='goodsPrice'>"+price+"</td>"+
"<td>"+
"<input type='button' value='-' name='x1' style='cursor: pointer'> "+
"<input type='text' value='1' name='num'> "+
"<input type='button' value='+' name='j1' style='cursor: pointer'>"
+"</td>"+
'<td><a href="" class=" rel="external nofollow" delete" >刪除</a></td>' +
"</tr>"
$("tbody").append(goods);
//每次添加完，綁定事件
initButton();
initdelete();
initCheckBox();
}}
});
</script>以上是“js如何實(shí)現(xiàn)簡單購物車模塊”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼