Форум

RadCor · #1 (**permalink**) 26.04.2015, 21:07

Всем привет, я в JS не мастер, прощу помощи у знатоков.

В общем нужен следующий скрипт:

Есть поле инпут, в нём может быть значение от 36 д 160 .
По бокам этого инпута должны быть 2 кнопки, с одной стороны минус, с друго плюс. Шаг равен 2. То есть если жмём на плюс, то значение в инпуте меняется с 36 на 38, 40, 42, 44, 46 и так дальше.

Цена рассчитывается так.

Обложка альбома стоит 490 руб.
Минимальное количество страниц 36 (одна страница стоит 25 рублей, то есть 2 страницы, другими словами 1 лист, стоит 50 руб) Формула такая:

490 + (25*36) = 1390 руб

1390 руб это начальная цена, которая указана возле инпута со значением 36.

Когда жмём на + значение должно изменится на 38 а к цене прибавится стоимость 2 страниц 50 руб.

Значить было так:

- 36 + 1390 руб

Стало так:

- 38 + 1440 руб.

Всё довольна таки просто.
За скрипт заплачу 500 рублей.

рони · #2 (**permalink**) 26.04.2015, 21:49

Сообщение от RadCor

Нужен простой

простого нет, есть сложный

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
  <style>
  #slider-range{
    margin:20px;
    width:500px;
    height:5px;
  }
  #show{
       position: relative;
       width: 30px;
       top: 5px;

    }

  .ui-slider-handle{
     margin-top: -0.2em;
    border-radius:50%;
    position:relative;
    font-size:14px;
    display:block;
  }
  :focus{
    outline:0;
    border:0;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>

$(function() {
		$( "#slider-range" ).slider({
			min: 36,
			max: 160,
			value: 36,
            step: 2 ,
			slide: function( event, ui ) {
                var left = $(ui.handle).css("left");
                $("#show").html(ui.value).css({left : left} )
				$('#price').html(ui.value + ' - ' + (ui.value*25 + 490));
			},
			change: function(event, ui) {
			   var left = $(ui.handle).css("left");
               $("#show").html(ui.value).css({left : left} )
			   $('#price').html(ui.value + ' - ' + (ui.value*25 + 490));
			}
		});
	});

</script>
</head>

<body>
    <div id="show">36</div>
	<div id="slider-range" ></div>
	<div id="price">36 - 1390</div>
</body>
</html>

RadCor · #3 (**permalink**) 26.04.2015, 22:07

Скрипт крутой, но мне очень принципеально не через бегунок, а именно через + и -

Что бы так было

<a href=# id="minus">-</a>
<input tupe="text" value="36">
<a href=# id="plus">+</a>

Rome. · #4 (**permalink**) 26.04.2015, 22:41

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></script>
<style>
  .wrap-count  {
    margin: 100px;
  }
  .wrap-count > input {
    display: inline-block;
  }
  input[type=text] {
    width: 30px;
  }
  #change_val {
    width: 100px;
  }
</style>

  <div class="wrap-count">
   <input type="button" id="minus_count" value="-">
   <input type="text" id="field_count" value="36">
   <input type="button" id="plus_count" value="+">
   <input type="text" id="change_val" value="1390 руб.">
  </div>
  <script>
    var valInput = $('#field_count').attr('value');
    valInput = Number(valInput);
    var changeVal = $('#change_val').attr('value');
    changeVal = changeVal.replace(/\D/g, '');
    changeVal = Number(changeVal);
    console.log(changeVal)
    var step = 2;
    var price = 50;

    $('#plus_count').click(function () {
     valInput = valInput + step;
     changeVal = changeVal + price;
     $('#field_count').attr('value', valInput);
     $('#change_val').attr('value', changeVal + ' руб.');
      if (valInput > 160) {
         valInput = 160;
         $('#field_count').attr('value', 160);
      }
      if (changeVal > 4490) {
         changeVal = 4490;
         $('#change_val').attr('value', changeVal + ' руб.');
      }
    });

    $('#minus_count').click(function () {
     valInput = valInput - step;
     changeVal = changeVal - price;
      $('#field_count').attr('value', valInput);
      $('#change_val').attr('value', changeVal + ' руб.');
      if (valInput < 36) {
         valInput = 36;
         $('#field_count').attr('value', 36);
      }
      if (changeVal < 1390) {
         changeVal = 1390;
         $('#change_val').attr('value', changeVal + ' руб.');
      }
    });
  </script>

рони · #5 (**permalink**) 26.04.2015, 22:47

RadCor,
input type="number" для современных браузеров есть

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .btn{
      cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
jQuery(document).ready(function($) {
        $('.quont-minus').click(function () {
            var $input = $(this).parent().find('input');
            var val = +$input[0].defaultValue;
            var count = parseInt($input.val()) - $input.data("value");
            count = count < val ? val : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.quont-plus').click(function () {
            var $input = $(this).parent().find('input');
            var val = +$input.data("max");
            var count = parseInt($input.val()) + $input.data("value");
            count = count > val ? val : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.opt-quontity input').change(function() {
       $(this).nextAll('.show').html(this.value + ' - ' + (this.value*25 + 490))
})

    });
  </script>
</head>

<body>
  <div class="opt-quontity">
    <span class="quont-minus btn">-</span>
    <input type="text" value="36" data-value="2" data-max="160">
    <span class="quont-plus btn">+</span>
    <div class="show">36 - 1390</div>
</div> <!-- .opt-quontity -->
</body>
</html>

рони · #6 (**permalink**) 26.04.2015, 22:51

Сообщение от Rome.

$('#change_val').attr('value', changeVal + ' руб.');

вы в курсе что это только для особо умных браузеров сработает?

RadCor · #7 (**permalink**) 26.04.2015, 23:23

Парни, и тот и другой вариант подходит. Огромное спасибо!
Только я теперь не знаю кому деньги отдавать

Rome. · #8 (**permalink**) 26.04.2015, 23:26

Никому.

рони · #9 (**permalink**) 27.04.2015, 00:21

RadCor,
на всякий случай вариант Rome., проверьте в ie

RadCor · #10 (**permalink**) 27.04.2015, 00:45

Да мне для IE не нужно. Принципиально всегда игнорирую этот браузер.
Но оплачу всё же вам, так как вы первый взялись за мой вопрос. Я думаю Rome. поймёт это и не обидеться.
У вас Рони прошу номер или банковской карты, или Яндекс Денег (ЯД приоритетнее)

P.S. тему прошу пока не закрывать, так как скорее всего завтра один вопрос по этому скрипту ещё будет.

Форум

Справочник

Discord чат

Курсы javascript