當前位置：首頁 >

js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

發布時間：2025/4/16 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实现购物车数量的增加与减少，js实现购物车数量的自增与自减小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

js實現購物車數量的增加與減少，js實現購物車數量的自增與自減

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js實現購物車數量的增加與減少，js實現購物車數量的自增與自減</title> </head><body> <center> <table> <tr> <td>1</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> <tr> <td>2</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> <tr> <td>3</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> </table> </center> <script type="text/javascript"> function checknum(obj){if(obj.value >10){obj.value = 10;alert('Max 10!');} } function changeNum(obj,num) {var input = getParent(obj).getElementsByTagName("input");for(var i=0;i<input.length;i++){if(input[i].type=="text"){if(input[i].value == "")input[i].value = num;elseinput[i].value = input[i].value - 0 + num;}if(input[i].value == "-1")input[i].value = 0;if(input[i].value == "11")input[i].value = 10;} } //獲取父級對像 function getParent(obj) {if(typeof(obj) != "object"){obj = document.getElementById(obj);}if(obj)return obj.parentElement || obj.parentNode; } </script> </body> </html>

轉載于:https://www.cnblogs.com/afish/p/4098163.html

總結

以上是生活随笔為你收集整理的js实现购物车数量的增加与减少，js实现购物车数量的自增与自减的全部內容，希望文章能夠幫你解決所遇到的問題。

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