Нужен простой 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 рублей. |
slider jquery ui калькулятор
Цитата:
<!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>
|
Скрипт крутой, но мне очень принципеально не через бегунок, а именно через + и -
Что бы так было <a href=# id="minus">-</a> <input tupe="text" value="36"> <a href=# id="plus">+</a> |
<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>
|
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>
|
Цитата:
|
Парни, и тот и другой вариант подходит. Огромное спасибо!
Только я теперь не знаю кому деньги отдавать :-? |
Никому.
|
RadCor,
на всякий случай вариант Rome., проверьте в ie |
Да мне для IE не нужно. Принципиально всегда игнорирую этот браузер.
Но оплачу всё же вам, так как вы первый взялись за мой вопрос. Я думаю Rome. поймёт это и не обидеться. У вас Рони прошу номер или банковской карты, или Яндекс Денег (ЯД приоритетнее) P.S. тему прошу пока не закрывать, так как скорее всего завтра один вопрос по этому скрипту ещё будет. |
| Часовой пояс GMT +3, время: 10:26. |