在做商城项目的时候，需要在购物车中增加一个商品加减功能，并在加减时同时修改总价格的显示，并且保证文本框text只能输入纯数字
效果图：
源码：
<!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数量加减</title>
<script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#quantity").keyup(function(){
if(isNaN($(this).val()) || parseInt($(this).val())<1){
$(this).val("1");
$("#totalPrice").html($("#price").val());
return;
}
var total = parseFloat($("#price").val())*parseInt($(this).val());
$("#totalPrice").html(total.toFixed(2));
})
})
/*商品数量+1*/
function numAdd(){
var num_add = parseInt($("#quantity").val())+1;
if($("#quantity").val()==""){
num_add = 1;
}
$("#quantity").val(num_add);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
var num_dec = parseInt($("#quantity").val())-1;
if(num_dec<1){
//购买数量必须大于或等于1
alert("not lt 1");
}else{
$("#quantity").val(num_dec);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
}
</script>
<script type="text/javascript">
/*或者不用jquery*/
/*商品数量框输入*/
function keyup(){
var quantity = document.getElementById("quantity").value;
if(isNaN(quantity) || parseInt(quantity)!=quantity || parseInt(quantity)<1){
quantity = 1;
return;
}
if(quantity>=200){
document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);
alert("商品数量不能大于200");
}
}
/*商品数量+1*/
function numAdd(){
var quantity = document.getElementById("quantity").value;
var num_add = parseInt(quantity)+1;
if(quantity==""){
num_add = 1;
}
if(num_add>=200){
document.getElementById("quantity").value=num_add-1;
alert("商品数量不能大于200");
}else{
document.getElementById("quantity").value=num_add;
}
}
/*商品数量-1*/
function numDec(){
var quantity = document.getElementById("quantity").value;
var num_dec = parseInt(quantity)-1;
if(num_dec>0){
document.getElementById("quantity").value=num_dec;
}
}
</script>
</head>
<body>
<p>Quantity: <span onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="numAdd()">+</span></p>
<p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>
<input type="hidden" value="28.1" id="price" /><!--单价-->
</body>
</html>
相关推荐
这个例子主要展示了如何使用jQuery实现这一功能，同时确保用户只能输入纯数字。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在这个示例中，我们利用jQuery的...
本文将详细讲解如何使用 jQuery 快速实现商品数量加减的方法。 首先，我们需要在 HTML 页面中设置基本的结构。这里有一个包含两个按钮（一个用于减少数量，一个用于增加数量）和一个输入框（显示当前数量）的简单...
这个例子展示了如何使用JQuery和HTML5的`<input type="number">`特性创建一个带增减按钮的输入框，并实现输入范围的限制。在实际项目中，你可能需要根据具体需求进行调整，比如添加动画效果、自定义样式或者处理其他...
4. **基本计算逻辑**：这个计算器实现了加、减、乘、除的基本运算。这些运算可能通过JavaScript的内置运算符来完成，例如`total = current + operand`或`total = current * operand`。 5. **版本信息**：项目使用的...
3. **计算逻辑**：编写函数处理加减乘除等基本运算，以及处理优先级、括号等复杂情况。 4. **DOM操作**：通过`document.getElementById`或`querySelector`等方法找到HTML元素，然后更新其内容来显示计算结果。 在...