带加减按钮的数字输入框(整理)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带加减按钮的数字输入框(整理)</title>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
body {margin:0;padding:0;
}
li{list-style: none;
}
.number-box {border:#e5e5e5 solid 1px;display:inline-block;overflow:hidden;
}
.number-box input[type='text'] {height:30px;border-top:none;border-bottom:none;border-left:#e5e5e5 solid 1px;border-right:#e5e5e5 solid 1px;margin:0;text-align:center;width:40px;outline:none;padding:0 5px;float:left;line-height:30px;
}
.number-box input[type='button'] {height:30px;width:40px;float:left;border:none;outline:none;background-color:#f3f3f3;line-height:30px;cursor:pointer;padding:0;
}
.number-box input[type='button']:hover {background-color:#f9f9f9;
}
.number-box input[type='button']:active {background-color:#f6f6f6;
}
</style>
</head>
<body>
<ul><li><div class="number-box"><input type="button" class="on-number" value="-" data-v="-1"><input type="text" value="0"><input type="button" class="on-number" value="+" data-v="1"></div></li><li><div class="number-box"><input type="button" class="on-number" value="减" data-v="-1"><input type="text" value="-5"><input type="button" class="on-number" value="加" data-v="1"></div></li><li><div class="number-box"><input type="button" class="on-number" value="减" data-v="-1"><input type="text" value="5"><input type="button" class="on-number" value="加" data-v="1"></div></li>
</ul><script>
$(document.documentElement).on("click", ".on-number", function() {var $val = $(this).siblings("input[type='text']"),val = parseInt($val.val(), 10) + parseInt($(this).data("v"));$val.val(isNaN(val) ? 0 : val);
});
</script></body>
</html>

带加减按钮的数字输入框(整理)相关推荐

表单html中加减数字按钮,纯CSS实现数字加减按钮的最佳方案
前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片--这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用"+""-" ...
html加减中间的值不能修改,在移动HTML5页面input类型采用number无法控制长度，以及右边显示难看的加减按钮...
场景: 这是之前做的移动web控件时遇到的问题.当时在我们控件的HTML5页面需要输入卡号.CV2.手机号.验证码等信息.大家都知道这些值都是数字.普通类型的输入框,当我们点击时,手机默认掉起的键盘 ...
一个简单的购物车加减按钮
一个简单的购物车加减按钮,自定义控件实现,非常简单,有兴趣的可以自己尝试一下 import android.content.Context; import android.util.Attribute ...
vue+element的表格中添加加减按钮的问题
闲话少说先上效果图: 就是加减按钮能点,而且互不影响点击的效果. 起关键作用的就是在vue中的一个点击事件的控制: @click.prevent=" " 而加了这个是只能点击一次: ...
学校几年级要带加减计算机,一年级家长朋友们看过来,有多少孩子的数学老师要求背加减法...
从上幼儿园开始,老师就要求背诵加减法,分合式.我一直没执行过. 上了小学,老师布置的作业也有背诵加减法,我偶尔有让小猪背过. 我一直认为数学不应该是背诵的一门学科.但这次开家长会,老师又强调了,背诵加 ...
android文本框左右加减按钮长按一直加减
为什么80%的码农都做不了架构师?>>> 来说说今天的战绩吧,说是战绩,是因为今天写代码时效率挺高,可能是因为集中精力吧,所以,如果要写好程序的话,最好满足以下两点: 1.写 ...
html电商数量加减插件,jQuery数字加减插件
左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1. 调用也非常 ...
原生前端：input标签 number类型输入框如何清除上下加减按钮？
<input type="number"><style>input::-webkit-outer-spin-button,input::-webkit-in ...
Android开发之购物车加减按钮(附加源码)
老套路,先看效果图直接上代码: package com.xiayiye.shopcarnumberadd.view;import android.content.Context; import an ...

带加减按钮的数字输入框(整理)

带加减按钮的数字输入框(整理)相关推荐

最新文章

热门文章