<input class="addBtn min" type="button" value="-" />
<input class="join-money" type="text" value="1">
<input class="addBtn add" type="button" value="+" />
<span class="total">¥<span class="allMoney">10000</span></span>
<p class="money-tip">(每份金额10000元)</p> js:
var t = $(".join-money");
var m = $(".allMoney").text();
var mm = $(".allMoney");
function updateMoney(){
var tt = t.val();
var total = m*tt; //输入框中的份额数与每份金额数相乘得到总金额
mm.text(total);
if(t.val()<=0){
mm.text(m);
}
}
$(function(){
$(".add").click(function() {
t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
updateMoney(); //显示总金额
});
$(".min").click(function(){
t.val(parseInt(t.val())-1); //点击减号输入框数值减1
    if(t.val()<=0){
t.val(parseInt(t.val())+1); //最小值为1
}
updateMoney();
});
$(".join-money").keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){//替换非数字字符
var amount=c.val().replace(/[^\d]/g,'');
$(this).val(amount);
}
updateMoney(); //手动输入数值金额随之改变
});
});

jquery实现input输入框点击加减数值随之变动的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  3. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

  5. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  6. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  7. 如何用jquery获取input输入框中的值?

    如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...

  8. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  9. jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)

    $("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...

随机推荐

  1. 从入门到自闭之Python集合,深浅拷贝(大坑)

    小数据池 int: -5~256 str: 字母,数字长度任意符合驻留机制 字符串进行乘法时总长度不能超过20 特殊符号进行乘法时只能乘以0 代码块: 一个py文件,一个函数,一个模块,终端中的每一行 ...

  2. k8s-高可用架构设计

    docker的私有仓库harbor.容器化kubernetes部分组建.使用阿里云日志服务收集日志. 部署完成后,你将理解系统各组件的交互原理,进而能快速解决实际问题,所以本文档主要适合于那些有一定k ...

  3. 怎样理解 DOCTYPE 声明

    1. HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...

  4. python读写增删修改ini配置文件

    一,百度百科 .ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储格式,统管windows的各项配置,一般用户就用windows提供的 ...

  5. Java list的实现类

    Java list的实现类 本文是根据博文整理 Java中,List接口一共有三个实现类:ArrayList.Vector和LinkedList. 其中ArrayList和Vector都是利用数组这一 ...

  6. mqtt协议实现 java服务端推送功能(二)java demo测试

    上一篇写了安装mosQuitto和测试,但是用cmd命令很麻烦,有没有一个可视化软件呢? 有,需要在google浏览器下载一个叫MQTTLens的插件 打开MQTTLens后界面如下: 打开conne ...

  7. 解决vs code编写python输出中文乱码问题

    环境: win7 vscode 1.37.0 插件: python Code Runner 乱码问题: 创建一个python文件,运行如下代码,打印显示乱码.: 解决乱码步骤: Ctrl+Shift+ ...

  8. python之项目依赖管理

    生成所有依赖清单 requirements.txt 1.  pipreqs 工具 安装) pip install pipreqs 执行生成依赖列表命令) pipreqs ./ 完善版本: pipreq ...

  9. 第二卷 第一章 伪IOC容器--羊墅

    写在前面: Spring自诞生起,就被人称作“万能胶”,核心服务就是解耦 ,随着Spring5的出现,已经形成一个生态,被人称作spring全家桶,而且逐步在去serlvet化,去tomcat化,大有 ...

  10. telnet命令测试端口连接是否正常, telnet不是内部或外部命令的方案

    telnet ip地址 端口 1.点击开始 → 运行 → 输入CMD,回车.2.在DOS界面里,输入telnet测试端口命令:   telnet IP 端口  或  telnet 域名 端口,回车. ...