购物车：点击增加或减少数量的文本输入框

在做到购物车相关页面时，通常需要对一个商品数量进行增/减操作。现在发一个对文本输入框通过点击实现数量增减的实现方法：

下图是效果图：

 

购物车：点击增加或减少数量的文本输入框

Html 代码：

  1. <div class='ctrl'>
  2.     <div class='ctrl-button ctrl-button-decrement'>
  3.         -
  4.     </div>
  5.     <div class='ctrl-counter'>
  6.         <input class='ctrl-counter-input' maxlength='10' type='text' value='0'>
  7.         <div class='ctrl-counter-num'>
  8.             0
  9.         </div>
  10.     </div>
  11.     <div class='ctrl-button ctrl-button-increment'>
  12.         +
  13.     </div>
  14. </div>

Css 代码：

  1. * {
  2.     -webkit-user-select: none;
  3.     -moz-user-select: none;
  4.     -ms-user-select: none;
  5.     user-select: none;
  6.     box-sizing: border-box;
  7. }
  8. html,body {
  9.     height: 100%;
  10. }
  11. body {
  12.     display: -webkit-box;
  13.     display: -ms-flexbox;
  14.     display: flex;
  15.     -webkit-box-align: center;
  16.     -ms-flex-align: center;
  17.     align-items: center;
  18.     -webkit-box-pack: center;
  19.     -ms-flex-pack: center;
  20.     justify-content: center;
  21.     background-color: #EDF1F6;
  22.     -webkit-appearance: none !important;
  23.     -moz-appearance: none !important;
  24.     appearance: none !important;
  25.     -webkit-backface-visibility: hidden;
  26.     backface-visibility: hidden;
  27.     -webkit-font-smoothing: antialiased;
  28.     -moz-font-smoothing: antialiased;
  29.     -moz-osx-font-smoothing: grayscale;
  30.     -webkit-overflow-scrolling: touch;
  31.     text-rendering: optimizelegibility;
  32. }
  33. .ctrl {
  34.     -webkit-box-flex: 0;
  35.     -ms-flex: 0 0 auto;
  36.     flex: 0 0 auto;
  37.     display: -webkit-box;
  38.     display: -ms-flexbox;
  39.     display: flex;
  40.     -webkit-box-align: center;
  41.     -ms-flex-align: center;
  42.     align-items: center;
  43.     border-bottom: 1px solid #D5DCE6;
  44.     background-color: #fff;
  45.     border-radius: 5px;
  46.     font-size: 30px;
  47. }
  48. .ctrl-counter {
  49.     position: relative;
  50.     width: 200px;
  51.     height: 100px;
  52.     color: #333C48;
  53.     text-align: center;
  54.     overflow: hidden;
  55. }
  56. .ctrl-counter.is-input .ctrl-counter-num {
  57.     visability: hidden;
  58.     opacity: 0;
  59.     -webkit-transition: opacity 100ms ease-in;
  60.     transition: opacity 100ms ease-in;
  61. }
  62. .ctrl-counter.is-input .ctrl-counter-input {
  63.     visability: visible;
  64.     opacity: 1;
  65.     -webkit-transition: opacity 100ms ease-in;
  66.     transition: opacity 100ms ease-in;
  67. }
  68. .ctrl-counter-input {
  69.     width: 100%;
  70.     margin: 0;
  71.     padding: 0;
  72.     position: relative;
  73.     z-index: 2;
  74.     box-shadow: none;
  75.     outline: none;
  76.     border: none;
  77.     color: #333C48;
  78.     font-size: 30px;
  79.     line-height: 100px;
  80.     text-align: center;
  81.     visability: hidden;
  82.     opacity: 0;
  83.     -webkit-transition: opacity 100ms ease-in;
  84.     transition: opacity 100ms ease-in;
  85. }
  86. .ctrl-counter-num {
  87.     position: absolute;
  88.     z-index: 1;
  89.     top: 0;
  90.     left: 0;
  91.     rightright: 0;
  92.     bottombottom: 0;
  93.     line-height: 100px;
  94.     visability: visible;
  95.     opacity: 1;
  96.     -webkit-transition: opacity 100ms ease-in;
  97.     transition: opacity 100ms ease-in;
  98. }
  99. .ctrl-counter-num.is-increment-hide {
  100.     opacity: 0;
  101.     -webkit-transform: translateY(-50px);
  102.     transform: translateY(-50px);
  103.     -webkit-animation: increment-prev 100ms ease-in;
  104.     animation: increment-prev 100ms ease-in;
  105. }
  106. .ctrl-counter-num.is-increment-visible {
  107.     opacity: 1;
  108.     -webkit-transform: translateY(0);
  109.     transform: translateY(0);
  110.     -webkit-animation: increment-next 100ms ease-out;
  111.     animation: increment-next 100ms ease-out;
  112. }
  113. .ctrl-counter-num.is-decrement-hide {
  114.     opacity: 0;
  115.     -webkit-transform: translateY(50px);
  116.     transform: translateY(50px);
  117.     -webkit-animation: decrement-prev 100ms ease-in;
  118.     animation: decrement-prev 100ms ease-in;
  119. }
  120. .ctrl-counter-num.is-decrement-visible {
  121.     opacity: 1;
  122.     -webkit-transform: translateY(0);
  123.     transform: translateY(0);
  124.     -webkit-animation: decrement-next 100ms ease-out;
  125.     animation: decrement-next 100ms ease-out;
  126. }
  127. .ctrl-button {
  128.     width: 100px;
  129.     line-height: 100px;
  130.     text-align: center;
  131.     color: #fff;
  132.     cursor: pointer;
  133.     background-color: #8498a7;
  134.     -webkit-transition: background-color 100ms ease-in;
  135.     transition: background-color 100ms ease-in;
  136. }
  137. .ctrl-button:hover {
  138.     background-color: #90a2b0;
  139.     -webkit-transition: background-color 100ms ease-in;
  140.     transition: background-color 100ms ease-in;
  141. }
  142. .ctrl-button:active {
  143.     background-color: #778996;
  144.     -webkit-transition: background-color 100ms ease-in;
  145.     transition: background-color 100ms ease-in;
  146. }
  147. .ctrl-button-decrement {
  148.     border-radius: 5px 0 0 5px;
  149. }
  150. .ctrl-button-increment {
  151.     border-radius: 0 5px 5px 0;
  152. }
  153. @-webkit-keyframes decrement-prev {
  154.     from {
  155.     opacity: 1;
  156.     -webkit-transform: translateY(0);
  157.     transform: translateY(0);
  158. }
  159. }   @keyframes decrement-prev {
  160.     from {
  161.     opacity: 1;
  162.     -webkit-transform: translateY(0);
  163.     transform: translateY(0);
  164. }
  165. }   @-webkit-keyframes decrement-next {
  166.     from {
  167.     opacity: 0;
  168.     -webkit-transform: translateY(-50px);
  169.     transform: translateY(-50px);
  170. }
  171. }   @keyframes decrement-next {
  172.     from {
  173.     opacity: 0;
  174.     -webkit-transform: translateY(-50px);
  175.     transform: translateY(-50px);
  176. }
  177. }   @-webkit-keyframes increment-prev {
  178.     from {
  179.     opacity: 1;
  180.     -webkit-transform: translateY(0);
  181.     transform: translateY(0);
  182. }
  183. }   @keyframes increment-prev {
  184.     from {
  185.     opacity: 1;
  186.     -webkit-transform: translateY(0);
  187.     transform: translateY(0);
  188. }
  189. }   @-webkit-keyframes increment-next {
  190.     from {
  191.     opacity: 0;
  192.     -webkit-transform: translateY(50px);
  193.     transform: translateY(50px);
  194. }
  195. }   @keyframes increment-next {
  196.     from {
  197.     opacity: 0;
  198.     -webkit-transform: translateY(50px);
  199.     transform: translateY(50px);
  200. }
  201. }

Css 代码包括了对 Input 框位置设置和对 body 进行了设置，所以比较臃肿，去除非必要的代码后，大约可以减少1/3的代码。

JavaScript 代码：

  1. (function() {
  2.     'use strict';
  4.     function ctrls() {
  5.         var _this = this;
  7.         this.counter = 0;
  8.         this.els = {
  9.             decrement: document.querySelector('.ctrl-button-decrement'),
  10.             counter: {
  11.                 container: document.querySelector('.ctrl-counter'),
  12.                 num: document.querySelector('.ctrl-counter-num'),
  13.                 input: document.querySelector('.ctrl-counter-input')
  14.             },
  15.             increment: document.querySelector('.ctrl-button-increment')
  16.         };
  18.         this.decrement = function() {
  19.             var counter = _this.getCounter();
  20.             var nextCounter = (_this.counter > 0) ? --counter: counter;
  21.             _this.setCounter(nextCounter);
  22.         };
  24.         this.increment = function() {
  25.             var counter = _this.getCounter();
  26.             var nextCounter = (counter < 9999999999) ? ++counter: counter;
  27.             _this.setCounter(nextCounter);
  28.         };
  30.         this.getCounter = function() {
  31.             return _this.counter;
  32.         };
  34.         this.setCounter = function(nextCounter) {
  35.             _this.counter = nextCounter;
  36.         };
  38.         this.debounce = function(callback) {
  39.             setTimeout(callback, 100);
  40.         };
  42.         this.render = function(hideClassName, visibleClassName) {
  43.             _this.els.counter.num.classList.add(hideClassName);
  45.             setTimeout(function() {
  46.                 _this.els.counter.num.innerText = _this.getCounter();
  47.                 _this.els.counter.input.value = _this.getCounter();
  48.                 _this.els.counter.num.classList.add(visibleClassName);
  49.             },
  50.             100);
  52.             setTimeout(function() {
  53.                 _this.els.counter.num.classList.remove(hideClassName);
  54.                 _this.els.counter.num.classList.remove(visibleClassName);
  55.             },
  56.             200);
  57.         };
  59.         this.ready = function() {
  60.             _this.els.decrement.addEventListener('click',
  61.             function() {
  62.                 _this.debounce(function() {
  63.                     _this.decrement();
  64.                     _this.render('is-decrement-hide', 'is-decrement-visible');
  65.                 });
  66.             });
  68.             _this.els.increment.addEventListener('click',
  69.             function() {
  70.                 _this.debounce(function() {
  71.                     _this.increment();
  72.                     _this.render('is-increment-hide', 'is-increment-visible');
  73.                 });
  74.             });
  76.             _this.els.counter.input.addEventListener('input',
  77.             function(e) {
  78.                 var parseValue = parseInt(e.target.value);
  79.                 if (!isNaN(parseValue) && parseValue >= 0) {
  80.                     _this.setCounter(parseValue);
  81.                     _this.render();
  82.                 }
  83.             });
  85.             _this.els.counter.input.addEventListener('focus',
  86.             function(e) {
  87.                 _this.els.counter.container.classList.add('is-input');
  88.             });
  90.             _this.els.counter.input.addEventListener('blur',
  91.             function(e) {
  92.                 _this.els.counter.container.classList.remove('is-input');
  93.                 _this.render();
  94.             });
  95.         };
  96.     };
  98.     // init
  99.     var controls = new ctrls();
  100.     document.addEventListener('DOMContentLoaded', controls.ready);
  101. })();

See the Pen Custom input number by 墨丶水瓶 (@Nexiy) on CodePen.

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: