Bootstrap3的输入框数字点击修改效果

<div class="container">

<div class="page-header"><h3>Bootstrap 3 输入框数字修改效果</h3></div>

<div class="input-group spinner">

<input type="text" class="form-control" value="1000">

<div class="input-group-btn-vertical">

<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>

<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>

</div>

</div>

</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->

<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

/*CSS源代码*/

@import url('http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css');

@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');

body{

background:orange;

font-family: 'microsoft yahei',Arial,sans-serif;

color:#FFF;

}

.spinner {

width: 200px;

}

.spinner input {

text-align: right;

}

.input-group-btn-vertical {

position: relative;

white-space: nowrap;

width: 1%;

vertical-align: middle;

display: table-cell;

}

.input-group-btn-vertical > .btn {

display: block;

float: none;

width: 100%;

max-width: 100%;

padding: 8px;

margin-left: -1px;

position: relative;

border-radius: 0;

}

.input-group-btn-vertical > .btn:first-child {

border-top-right-radius: 4px;

}

.input-group-btn-vertical > .btn:last-child {

margin-top: -2px;

border-bottom-right-radius: 4px;

}

.input-group-btn-vertical i{

position: absolute;

top: 0;

left: 4px;

}

/*Javascript代码片段*/

(function ($) {

$('.spinner .btn:first-of-type').on('click', function() {

$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);

});

$('.spinner .btn:last-of-type').on('click', function() {

$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);

});

})(jQuery);