Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.04.2015, 21:07
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

Нужен простой JS 500 руб (смена количества + смена цены)
Всем привет, я в 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

slider jquery ui калькулятор
Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 26.04.2015, 22:07
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

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

Что бы так было
<a href=# id="minus">-</a>
<input tupe="text" value="36">
<a href=# id="plus">+</a>
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2015, 22:41
Аватар для Rome.
Новичок на форуме
Отправить личное сообщение для Rome. Посмотреть профиль Найти все сообщения от Rome.
 
Регистрация: 26.04.2015
Сообщений: 7

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

Сообщение от Rome.
$('#change_val').attr('value', changeVal + ' руб.');
вы в курсе что это только для особо умных браузеров сработает?
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2015, 23:23
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

Парни, и тот и другой вариант подходит. Огромное спасибо!
Только я теперь не знаю кому деньги отдавать
Ответить с цитированием
  #8 (permalink)  
Старый 26.04.2015, 23:26
Аватар для Rome.
Новичок на форуме
Отправить личное сообщение для Rome. Посмотреть профиль Найти все сообщения от Rome.
 
Регистрация: 26.04.2015
Сообщений: 7

Никому.
Ответить с цитированием
  #9 (permalink)  
Старый 27.04.2015, 00:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

RadCor,
на всякий случай вариант Rome., проверьте в ie
Ответить с цитированием
  #10 (permalink)  
Старый 27.04.2015, 00:45
Аватар для RadCor
Интересующийся
Отправить личное сообщение для RadCor Посмотреть профиль Найти все сообщения от RadCor
 
Регистрация: 26.04.2015
Сообщений: 10

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

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

Последний раз редактировалось RadCor, 27.04.2015 в 00:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дам 500 руб...нужна любая игра на JS с объяснением astra_89 Работа 5 31.05.2010 07:37