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

Bootstrap3的输入框数字点击修改效果的更多相关文章

  1. js实现点击修改按钮之后单元格变成可编辑状态

    主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...

  2. Waves – 赞!超炫交互体验的点击动画效果

    Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...

  3. js单击输入框后弹出提示信息效果

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

  4. Android Material适配 为控件设置指定背景色和点击波纹效果

    Android Material适配 为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上 ...

  5. iOS UIButton加在window上点击无效果问题

    UIButton加在window上,点击没有效果,找了很久,原来是没有加上这名:[self.window makeKeyAndVisible]; self.window = [[UIWindow al ...

  6. TextView SpannableString 使用之实现可点击超链接效果

    TextView SpannableString 使用之实现可点击超链接效果 如果看到这里说明你对 TextView 已经有了一定的了解,至少已经使用过该控件显示文字过.现在来实现一些复杂一点的效果. ...

  7. Egret 按钮点击缩放效果

    非代码设计,exml直接操作 设计模式下选中对象,之后[源码],会直接定位到该对象在exml源码中的位置 width.down = "100%" 表示当按钮按下的时候宽度为 100 ...

  8. AnimCheckBox按钮点击动画效果《IT蓝豹》

    AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...

  9. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

随机推荐

  1. 【BZOJ】1689: [Usaco2005 Open] Muddy roads 泥泞的路(贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1689 一开始我也想到了贪心,,,策略是如果两个连续的水池的距离小于l的话,那么就将他们链接起来,,, ...

  2. 【NLP】course

    http://52opencourse.com/235/%E6%96%AF%E5%9D%A6%E7%A6%8F%E5%A4%A7%E5%AD%A6%E8%87%AA%E7%84%B6%E8%AF%AD ...

  3. Windows下安装Apache 2.2.21图文教程

    https://www.jb51.net/article/52086.htm 本文详细介绍了在Windows平台上安装Apache的过程,希望对初次安装Apache的朋友有所帮助. 1. 软件准备 我 ...

  4. 在 Ubuntu Mate 16.04 上通过 PPA 升级 Mate 1.14

    导读 Mate 桌面环境 1.14 现在可以在 Ubuntu Mate 16.04 ("Xenial Xerus") 上使用了.根据这个版本的描述,为了全面测试 Mate 1.14 ...

  5. js 识别汉字和全角字符

    遇到个问题,需要检测输入框中的字符长度,如果是汉字,算作2个字节。。。 然后我就在想,我怎么去识别他是不是汉字呢???首先想到的可能就是 js 的 charCodeAt 方法, ASCII 码,然后就 ...

  6. MyBatis 学习 - 注解

    首先,POJO /** * @Title: Question.java * @Package com.test.model * @Description: TODO(POJO Question) * ...

  7. 05.Curator分布式锁

        锁:分布式的锁全局同步,这意味着任何一个时间点不会有两个客户端都拥有相同的锁. 1.可重入锁Shared Reentrant Lock     首先我们先看一个全局可重入的锁(可以多次获取,不 ...

  8. Groovy基本句法

    Groovy基本句法 Gradle作为一个构建工具自然不会自己去创造一门语言来支撑自己,那么它用的是哪门子语言呢?什么语言能写成这样: task hello { doLast { println 'H ...

  9. Exchange Pause or stop transport service

    The Microsoft Exchange Transport service is a service available both on the Microsoft Exchange Serve ...

  10. json和jsonp解决跨域传输数据等

    https://kb.cnblogs.com/page/139725/ https://blog.csdn.net/lambert310/article/details/51683775