123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- <script>
- function upDownOperation(element)
- {
- var _input = element.parent().find('input'),
- _value = _input.val(),
- _step = _input.attr('data-step') || 1;
- //检测当前操作的元素是否有disabled,有则去除
- element.hasClass('disabled') && element.removeClass('disabled');
- //检测当前操作的元素是否是操作的添加按钮(.input-num-up)‘是’ 则为加操作,‘否’ 则为减操作
- if ( element.hasClass('weui-number-plus') )
- {
- var _new_value = parseInt( parseFloat(_value) + parseFloat(_step) ),
- _max = _input.attr('data-max') || false,
- _down = element.parent().find('.weui-number-sub');
-
- //若执行‘加’操作且‘减’按钮存在class='disabled'的话,则移除‘减’操作按钮的class 'disabled'
- _down.hasClass('disabled') && _down.removeClass('disabled');
- if (_max && _new_value >= _max) {
- _new_value = _max;
- element.addClass('disabled');
- }
- } else {
- var _new_value = parseInt( parseFloat(_value) - parseFloat(_step) ),
- _min = _input.attr('data-min') || false,
- _up = element.parent().find('.weui-number-plus');
- //若执行‘减’操作且‘加’按钮存在class='disabled'的话,则移除‘加’操作按钮的class 'disabled'
- _up.hasClass('disabled') && _up.removeClass('disabled');
- if (_min && _new_value <= _min) {
- _new_value = _min;
- element.addClass('disabled');
- }
- }
- _input.val( _new_value );
- }
-
-
- $(function(){
- $('.weui-number-plus').click(function(){
- upDownOperation( $(this) );
- });
- $('.weui-number-sub').click(function(){
- upDownOperation( $(this) );
- });
-
- //评分js
- var arr = ["1分","2分","3分","4分","5分"];
- var num = -1;
- $(".weui-rater a").mouseover(function(){
- var thisL = $(this).index();
- for(var i = 0;i < thisL;i++){
- $(".weui-rater a").eq(i).addClass('checked');
- }
- for(var i = thisL; i < 5;i++){
- $(".weui-rater a").eq(i).removeClass('checked');
- }
- $(this).addClass('checked');
- })
- $(".weui-rater a").mouseout(function(){
- var thisL = $(this).index();
- for(var i = thisL; i < 5;i++){
- $(".weui-rater a").eq(i).removeClass('checked');
- }
- })
- $(".weui-rater").mouseout(function(){
-
- for(var i = 0; i < num;i++){
- $(".weui-rater a").eq(i).addClass('checked');
- }
- })
- $(".weui-rater a").click(function(){
- var thisL = $(this).index();
- $("#fen").html(arr[thisL]);
- $(this).addClass('checked');
- num = thisL+1;
- console.log(num);
- })
-
- });
- </script>
- </head>
- <body ontouchstart style="background-color: #f8f8f8;">
- <div class="weui_cells weui_cells_form ">
- <div class="weui_cell">
- <div class="weui_cell_bd weui_cell_primary"> <p>相隔2</p> </div>
- <div style="font-size: 0px;" class="weui_cell_ft">
- <a class="weui-number weui-number-sub needsclick">-</a>
- <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='1' data-min="1" data-max="10" data-step="2">
- <a class="weui-number weui-number-plus needsclick">+</a>
- </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
-
-
-
- <div class="weui_cell">
- <div class="weui_cell_bd weui_cell_primary"> <p>相隔1</p> </div>
- <div style="font-size: 0px;" class="weui_cell_ft">
- <a class="weui-number weui-number-sub needsclick">-</a>
- <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='0' data-min="0" data-max="10" data-step="1">
- <a class="weui-number weui-number-plus needsclick">+</a>
- </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
-
- </div>
- <div class="page-hd">
- <div class="weui-rater">
- <a data-num = "0" class="weui-rater-box checked"> <span class="weui-rater-inner">★</span> </a>
- <a data-num = "1" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
- <a data-num = "2" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
- <a data-num = "3" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
- <a data-num = "4" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
- </div>
- <div id='fen' class="weui_cells_title"></div>
- </div>
- </body>
- </html>
|