zoukankan      html  css  js  c++  java
  • 加减购物车数量源码

    效果:

    代码:

    <!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>
  • 相关阅读:
    LightOJ
    LightOJ
    51Nod 1021~1023 石子合并 (逐步加强版) 【dp】
    BZOJ1036 [ZJOI2008]树的统计Count 【树链剖分+线段树维护】
    51Nod 1677 treecnt 【树形dp+组合数学+逆元】
    逆元 【数学】
    51Nod 1705七星剑 【概率dp】
    BZOJ 1064 [Noi2008]假面舞会 【bfs】
    51 nod 1443 路径和树 【最短路径】
    BZOJ 1013 [JSOI2008]球形空间产生器sphere 【高斯消元】
  • 原文地址:https://www.cnblogs.com/rong88/p/7150940.html
Copyright © 2011-2022 走看看