form6.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. function upDownOperation(element)
  13. {
  14. var _input = element.parent().find('input'),
  15. _value = _input.val(),
  16. _step = _input.attr('data-step') || 1;
  17. //检测当前操作的元素是否有disabled,有则去除
  18. element.hasClass('disabled') && element.removeClass('disabled');
  19. //检测当前操作的元素是否是操作的添加按钮(.input-num-up)‘是’ 则为加操作,‘否’ 则为减操作
  20. if ( element.hasClass('weui-number-plus') )
  21. {
  22. var _new_value = parseInt( parseFloat(_value) + parseFloat(_step) ),
  23. _max = _input.attr('data-max') || false,
  24. _down = element.parent().find('.weui-number-sub');
  25. //若执行‘加’操作且‘减’按钮存在class='disabled'的话,则移除‘减’操作按钮的class 'disabled'
  26. _down.hasClass('disabled') && _down.removeClass('disabled');
  27. if (_max && _new_value >= _max) {
  28. _new_value = _max;
  29. element.addClass('disabled');
  30. }
  31. } else {
  32. var _new_value = parseInt( parseFloat(_value) - parseFloat(_step) ),
  33. _min = _input.attr('data-min') || false,
  34. _up = element.parent().find('.weui-number-plus');
  35. //若执行‘减’操作且‘加’按钮存在class='disabled'的话,则移除‘加’操作按钮的class 'disabled'
  36. _up.hasClass('disabled') && _up.removeClass('disabled');
  37. if (_min && _new_value <= _min) {
  38. _new_value = _min;
  39. element.addClass('disabled');
  40. }
  41. }
  42. _input.val( _new_value );
  43. }
  44. $(function(){
  45. $('.weui-number-plus').click(function(){
  46. upDownOperation( $(this) );
  47. });
  48. $('.weui-number-sub').click(function(){
  49. upDownOperation( $(this) );
  50. });
  51. //评分js
  52. var arr = ["1分","2分","3分","4分","5分"];
  53. var num = -1;
  54. $(".weui-rater a").mouseover(function(){
  55. var thisL = $(this).index();
  56. for(var i = 0;i < thisL;i++){
  57. $(".weui-rater a").eq(i).addClass('checked');
  58. }
  59. for(var i = thisL; i < 5;i++){
  60. $(".weui-rater a").eq(i).removeClass('checked');
  61. }
  62. $(this).addClass('checked');
  63. })
  64. $(".weui-rater a").mouseout(function(){
  65. var thisL = $(this).index();
  66. for(var i = thisL; i < 5;i++){
  67. $(".weui-rater a").eq(i).removeClass('checked');
  68. }
  69. })
  70. $(".weui-rater").mouseout(function(){
  71. for(var i = 0; i < num;i++){
  72. $(".weui-rater a").eq(i).addClass('checked');
  73. }
  74. })
  75. $(".weui-rater a").click(function(){
  76. var thisL = $(this).index();
  77. $("#fen").html(arr[thisL]);
  78. $(this).addClass('checked');
  79. num = thisL+1;
  80. console.log(num);
  81. })
  82. });
  83. </script>
  84. </head>
  85. <body ontouchstart style="background-color: #f8f8f8;">
  86. <div class="weui_cells weui_cells_form ">
  87. <div class="weui_cell">
  88. <div class="weui_cell_bd weui_cell_primary"> <p>相隔2</p> </div>
  89. <div style="font-size: 0px;" class="weui_cell_ft">
  90. <a class="weui-number weui-number-sub needsclick">-</a>
  91. <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='1' data-min="1" data-max="10" data-step="2">
  92. <a class="weui-number weui-number-plus needsclick">+</a>
  93. </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
  94. <div class="weui_cell">
  95. <div class="weui_cell_bd weui_cell_primary"> <p>相隔1</p> </div>
  96. <div style="font-size: 0px;" class="weui_cell_ft">
  97. <a class="weui-number weui-number-sub needsclick">-</a>
  98. <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='0' data-min="0" data-max="10" data-step="1">
  99. <a class="weui-number weui-number-plus needsclick">+</a>
  100. </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
  101. </div>
  102. <div class="page-hd">
  103. <div class="weui-rater">
  104. <a data-num = "0" class="weui-rater-box checked"> <span class="weui-rater-inner">★</span> </a>
  105. <a data-num = "1" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  106. <a data-num = "2" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  107. <a data-num = "3" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  108. <a data-num = "4" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  109. </div>
  110. <div id='fen' class="weui_cells_title"></div>
  111. </div>
  112. </body>
  113. </html>