加减购物车数量源码

效果：

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>加减购物车数量</title>

  <style>
  * {
  box-sizing: border-box;
}

.input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #cccccc;
  height: 40px;
  user-select: none;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 38px;
  background: #f1f1f1;
  color: #444444;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
  background: #dddddd;
}

.input-number-decrement {
  border-right: none;
  border-radius: 0px 0 0 0px;
}

.input-number-increment {
  border-left: none;
  border-radius: 0 0px 0px 0;
}</style>

 

</head>

<body>

  <span class="input-number-decrement">–</span><input class="input-number" type="text" value="1" min="0" max="10"><span class="input-number-increment">+</span>

  <script src="http://www.zaole.net/sliding.js"></script>


  <script>
    (function() {

  window.inputNumber = function(el) {

    var min = el.attr('min') || false;
    var max = el.attr('max') || false;

    var els = {};

    els.dec = el.prev();
    els.inc = el.next();

    el.each(function() {
      init($(this));
    });

    function init(el) {

      els.dec.on('click', decrement);
      els.inc.on('click', increment);

      function decrement() {
        var value = el[0].value;
        value--;
        if(!min || value >= min) {
          el[0].value = value;
        }
      }

      function increment() {
        var value = el[0].value;
        value++;
        if(!max || value <= max) {
          el[0].value = value++;
        }
      }
    }
  }
})();

inputNumber($('.input-number'));
    //@ sourceURL=pen.js
  </script>

</body>
</html>

 

posted @ 2017-07-11 15:48  优前程  阅读(325)  评论(0)  编辑  收藏  举报