html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...

本文将为点击增加或者减少商品数量并且自动计算总价格相关教程，具体实例代码请看下文:

点击增加或者减少商品数量并且自动计算总价格:

本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。代码实例如下:

织梦者

span{

color:red;

cursor:pointer;

}

$(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));

})

$("#add").click(function(){

numAdd();

});

$("#del").click(function(){

numDec();

});

})

/*商品数量+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));

}

单价：

数量：

总价格:28

打赏

微信、支付宝、QQ打赏

程序员，你不是一个人；Web开发QQ群：210916599加入QQ群

html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...相关推荐

原生js-购物车案例（三）已选商品添加和删除
原生js-购物车案例(三)已选商品添加和删除一. 点击这个部分(id=foot)显示选中商品区查看之前的css部分: .foot .selected-view {width: 935px;bord ...
Vue商品添加到购物车
用Vue实现把商品添加到购物车然后计算购物车里商品总金额. 功能分析: 1.商品添加到购物车 2.购物车显示商品的名称数量价格 3.计算购物车商品的总金额 4.删除购物车商品效果演示原始样式添加 ...
shop--10.商品--商品添加（前端）及问题的解决
productoperation.html 其中包括商品信息的添加和商品信息的修改,这个和店铺信息注册和修改用的是一样的 <!DOCTYPE html> <html> < ...
前端学习（2020）vue之电商管理系统电商系统之完成商品添加操作
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
根据上面的products列表写一个循环，不断询问用户想买什么，用户选择一个商品编号，就把对应的商品添加到购物车里，终用户输入q退出时，打印购买的商品列表。
一.问题: 现有商品列表如下: 1.products = [["iphone",6888],["MacPro",14800],["小米6", ...
仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
JavaWeb - 小米商城：商品添加到购物车
JavaWeb - 小米商城:商品添加到购物车 1.功能描述接上篇 JavaWeb - 仿小米商城(5):商品详情展示本篇博客将分析和实现小米商城商品添加到购物车和展示.如以下H5页面所示: 2 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
CentOS7设置静态IP、搭建单机版FastDFS图片服务器、使用FastDFS-Client客户端进行简单测试、实现图片上传、实现商品添加修改删除
CentOS7设置静态IP.搭建单机版FastDFS图片服务器.使用FastDFS-Client客户端进行简单测试.实现图片上传.实现商品添加修改删除 CentOS7设置静态IP而且还可以上网 192 ...
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...

html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...

html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...相关推荐

最新文章

热门文章