form7.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script>
  11. $(function(){
  12. });
  13. </script>
  14. </head>
  15. <body ontouchstart>
  16. <div class="page-hd">
  17. <h1 class="page-hd-title">
  18. 计数器
  19. </h1>
  20. <p class="page-hd-desc"></p>
  21. </div>
  22. <div class="weui-cells">
  23. <div class="weui-cell">
  24. <div class="weui-cell__bd">
  25. <p>优衣库轻薄羽绒服</p>
  26. </div>
  27. <div class="weui-cell__ft">
  28. <div class="weui-count">
  29. <a class="weui-count__btn weui-count__decrease"></a>
  30. <input class="weui-count__number" type="number" value="1" />
  31. <a class="weui-count__btn weui-count__increase"></a>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="weui-cell">
  36. <div class="weui-cell__hd"></div>
  37. <div class="weui-cell__bd">
  38. <p>三叶草男士运动鞋</p>
  39. </div>
  40. <div class="weui-cell__ft">
  41. <div class="weui-count">
  42. <a class="weui-count__btn weui-count__decrease"></a>
  43. <input class="weui-count__number" type="number" value="2" />
  44. <a class="weui-count__btn weui-count__increase"></a>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="weui-cell weui-cell_swiped">
  49. <div class="weui-cell__bd">
  50. <div class="weui-cell">
  51. <div class="weui-cell__bd">
  52. <p>袜子</p>
  53. </div>
  54. <div class="weui-cell__ft">
  55. <div class="weui-count">
  56. <a class="weui-count__btn weui-count__decrease"></a>
  57. <input class="weui-count__number" type="number" value="1" />
  58. <a class="weui-count__btn weui-count__increase"></a>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="weui-cell__ft">
  64. </div>
  65. </div>
  66. </div>
  67. <script>
  68. var MAX = 99, MIN = 1;
  69. $('.weui-count__decrease').click(function (e) {
  70. var $input = $(e.currentTarget).parent().find('.weui-count__number');
  71. var number = parseInt($input.val() || "0") - 1
  72. if (number < MIN) number = MIN;
  73. $input.val(number)
  74. })
  75. $('.weui-count__increase').click(function (e) {
  76. var $input = $(e.currentTarget).parent().find('.weui-count__number');
  77. var number = parseInt($input.val() || "0") + 1
  78. if (number > MAX) number = MAX;
  79. $input.val(number)
  80. })
  81. </script>
  82. <br>
  83. <br>
  84. <div class="weui-footer weui-footer_fixed-bottom">
  85. <p class="weui-footer__links">
  86. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  87. </p>
  88. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  89. </div>
  90. </body>
  91. </html>