在做商城项目的时候，需要在购物车中增加一个商品加减功能，并在加减时同时修改总价格的显示，并且保证文本框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 基础 在开始之前，确保已经在项目中引入了 jQuery 库。可以通过以下方式在 HTML ...
这个例子主要展示了如何使用jQuery实现这一功能，同时确保用户只能输入纯数字。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在这个示例中，我们利用jQuery的...
以上就是使用jQuery实现商品数量加减功能的基本步骤和关键知识点。通过结合HTML、CSS和jQuery，我们可以创建出一个高效且用户友好的购物体验。在实际开发中，还可以根据具体需求进行更多的定制和优化。
这个源码下载的主题是"文本框数量加减带总金额计算效果"，这涉及到一个常见的电商或购物网站功能，即动态更新商品总价。当用户在输入框中增加或减少商品数量时，系统会实时计算并显示总金额。这种功能提供了即时反馈...
在本文中，我们将深入探讨如何使用jQuery来实现一个商品数量加减功能，这通常用于电商网站的商品购物车页面。jQuery是一种强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得创建交互式网页变得更加...
类似QQ邮箱收件人文本框搜索添加多文本简单功能，实现了简单的删除。
本篇文章将详细讲解如何使用jQuery库来实现购物车中的数字加减效果，以提供用户友好的界面交互。 首先，jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务...
总的来说，jQuery实现的数量加减插件源码结合了DOM操作、事件处理、数值计算和用户交互优化等多个方面，是理解jQuery基本用法和实际应用场景的好例子。通过对源码的分析和学习，开发者不仅可以掌握这个功能的实现，...
jQuery Autocomplete是一款强大的JavaScript插件，它为网页中的输入框提供了自动补全功能，极大地提升了用户的交互体验。这个插件是jQuery UI库的一部分，能够帮助开发者轻松创建智能搜索或者建议输入的功能，使得...
在这个特定的场景中，我们关注的是如何使用jQuery来实现一个功能：当文本框（input[type="text"]）获取焦点时，其预设的文字自动消失，而当失去焦点时，文字又能重新出现。这个功能常见于搜索框或表单输入，以引导...
标题中的“jQuery 实现文本框自动补全”指的是在网页中使用jQuery库来创建一个功能，当用户在输入框中输入文字时，系统会根据已有的数据源提供匹配的建议，帮助用户快速完成输入。这种功能常用于搜索引擎、表单填充...
本主题聚焦于"jQuery点击文本框下拉菜单城市选择代码"，这是一个常见的用户界面功能，用于提高网页表单填写的便捷性。用户在输入城市信息时，可以通过点击文本框触发一个下拉菜单，展示可选的城市列表，从而快速选择...
总结来说，利用jQuery实现点击文本框触发下拉菜单城市选择的功能，主要涉及jQuery的选择器、事件绑定和DOM操作。通过理解和实践这些基本技巧，开发者可以创建更丰富的交互式Web应用，提升用户体验。在实际项目中，还...
当我们需要在网页上实现一个可多选的文本框时，jQuery提供了丰富的功能和插件来帮助我们完成这一需求。本文将深入探讨如何使用jQuery创建和管理多选文本框，以及相关的知识点。 首先，让我们明确什么是多选文本框。...
`jQuery`是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，因此在实现购物车数量加减功能时，`jQuery`是一个理想的工具。下面将详细解释如何使用`jQuery`来实现这个功能，...
标题中提到的“基于jQuery实现文本框缩放以及上下移动功能”，主要指的是利用jQuery这个JavaScript库来实现网页中文本框（一般指textarea标签）的动态缩放和滚动操作。jQuery是一种快速、小巧、功能丰富的JavaScript...