js按钮加减input框

作者: world_7735 | 来源:发表于2018-08-14 05:09 被阅读33次

js按钮加减input框
个人代码库-待更新
Tailwind Component
第四天
表单
表单指令
文本框整体删除及运算校验
html基础——2017.2.17
jquery和js实时监听input输入框值变化
js实现鼠标滑轮滚动加减数量

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="format-detection" content="telephone=no">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>指定比例分配</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .clearfix{
            clear: both;
        }
    .rate_ul_r{
  position: relative;
  width: 148px;
  right: 10px;
  top: 25px;
}
.rate_ul_r_jian{
  position: absolute;
  left:0;
  color:#6480d4;
  text-align: center;
  font-size: 28px;
  line-height: 30px;
  border:1px solid #a9aabc;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  top:0;
  width:30px;
  height:30px;
}
.rate_ul_r_jia{
  position: absolute;
  right:0;
  color:#6480d4;
  text-align: center;
  font-size: 28px;
  line-height: 30px;
  border:1px solid #a9aabc;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  top:0;
  width:30px;
  height:30px;
}
.rate_ul_r_input{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width:100%;
  font-size:16px;
  color: #333;
  text-align: center;
  display: block;
  line-height: 20px;
  padding:7px 50px 7px 35px;
}
.rate_ul_r_icon{
  position: absolute;
  right: 35px;
  top: 7px;
  color: #333;
  line-height: 20px;
  font-size: 16px;
}
    </style>
</head>
<body>
<div class="fr clearfix rate_ul_r">
    <span class="fl rate_ul_r_jian">-</span><input class="rate_ul_r_input" type="text" value="10"><span class="rate_ul_r_icon">%</span><span class="fr rate_ul_r_jia">+</span>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
             //加减
        $(".rate_ul_r_jian").click(function(){
            var values=$(this).siblings(".rate_ul_r_input");
            var valuesNumber=parseFloat(values.val());
            if(valuesNumber==NaN){
                values.val(0);
                
            }else{
                if(valuesNumber<10){
                    values.val(0);
                }else{
                    values.val(valuesNumber-10);
                }
            }
        });
        $(".rate_ul_r_jia").click(function(){
            var values=$(this).siblings(".rate_ul_r_input");
            var valuesNumber=parseFloat(values.val());
            if(valuesNumber==NaN){
                values.val(0);
                
            }else{
                if(valuesNumber>=90){
                    values.val(100);
                }else{
                    values.val(valuesNumber+10);
                }
            }
        });
    });
</script>