Вывод результата расчета по Кнопке
Добрый день , никак не могу прикрутить кнопку, не хочет она и все рассчитывать по кнопке.
Сам Скрипт
$(function () {
$("#amount_slider").slider({
orientation: "horizontal",
range: false,
min: 10000,
max: 2000000,
value: 100000,
step: 1000,
slide: function (event, ui) {
$("#amount").text(ui.value);
calculatePayment()
}
});
$("#amount").text($("#amount_slider").slider("value"));
$("#time_slider").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 64,
value: 6,
step: 6,
slide: function (event, ui) {
$("#time").text(ui.value);
calculatePayment()
}
});
$("#time").text($("#time_slider").slider("value"));
function calculatePayment() {
var amount = $("#amount_slider").slider("value");
var interest = $("select#my_select").val() / 100;
var time = $("#time_slider").slider("value") * 1;
var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
$("#result").text(rate.toFixed(2));
}
calculatePayment()
});
Это ХТМЛ,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/loan.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" />
<title>Кредитный калькулятор</title>
</head>
<body>
<style type="text/css">
#amount_slider, #interest_slider, #time_slider
{
width: 200px;
margin-top: 20px;
float: left;
}
#amount, #interest, #time, #result {
margin-left: 20px;
margin-top: 20px;
float: left; }
#result {
font-weight: bold; }
.message { float: left;
margin-top: 20px;
font-family:Arial;
width: 100px; }
.clear { clear: both; }
</style>
<div>
<div class="message">Сумма кредита</div><div id="amount_slider"></div><div id="amount"> </div>
<div class="clear"></div>
<select id="my_select" name="my_select">
<option value="12">Авто</option>
<option value="10">Недвижимость</option>
<option value="15">Экспресс</option>
</select>
<div class="clear"></div>
<div class="clear"></div> <div class="message">Срок (мес)</div><div id="time_slider"></div>
<div id="time"></div>
<div class="clear"></div> <div class="message">Платеж в месяц</div><div id="result"></div>
<div class="clear"></div>
<br />
</body>
</html>
При таком коде работает все , тока результат сразу на странице отображается в Диве Result, он вызывается после каждого сдвига ползунка , calculatePayment() а также после расчета calculatePayment(), А мне надо что бы я выставил значения , нажал на кнопку и вышел расчет в том же Диве Result Делал кнопку добавлением в ХТМЛ <div onClick="calculatePayment();" style="cursor:hand;cursor:pointer;">Рассчитать</div> И соответственно в JS убирал calculatePayment() Но расчет не идет .. Пробовал так же Button прописовать в хтмл , c onClick="calculatePayment() нет результата, |
zeusrvp,
в строке 40 скрипта поставьте клик на див иначе функция calculatePayment из вне недоступна... ферштейн? |
Цитата:
Вас бы не затруднило привести пример , по данному коду, Допустим что я назначил Диву на который нажимают id = raschet тогда в JS мне надо var raschet = document.getElementById("raschet"); raschet.onclick = что тут мне вписать , пробывал разные варианты не проканало , может как о все это можно сократить ? Спасибо. |
zeusrvp,
raschet.onclick = calculatePayment; |
Цитата:
Сейчас вот так
function calculatePayment() {
var amount = $("#amount_slider").slider("value");
var interest = $("select#my_select").val() / 100;
var time = $("#time_slider").slider("value") * 1;
var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
$("#result").text(rate.toFixed(2));
var raschet = Document.getElementById("raschet");
raschet.onclick = calculatePayment();
}
Везде убрал calculatePayment() что бы сам не считал автоматом.. Диву в html так прописал <div id="raschet" style="cursor:hand;cursor:pointer;">Рассчитать</div></div> :cray: :( |
zeusrvp,
это типа строка 40 -- нетрогайте функцию -- ставьте ваши строки ниже функции |
zeusrvp,
:cray:
$(function () {
$("#amount_slider").slider({
orientation: "horizontal",
range: false,
min: 10000,
max: 2000000,
value: 100000,
step: 1000,
slide: function (event, ui) {
$("#amount").text(ui.value);
calculatePayment()
}
});
$("#amount").text($("#amount_slider").slider("value"));
$("#time_slider").slider({
orientation: "horizontal",
range: false,
min: 0,
max: 64,
value: 6,
step: 6,
slide: function (event, ui) {
$("#time").text(ui.value);
// calculatePayment()
}
});
$("#time").text($("#time_slider").slider("value"));
function calculatePayment() {
var amount = $("#amount_slider").slider("value");
var interest = $("select#my_select").val() / 100;
var time = $("#time_slider").slider("value") * 1;
var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
$("#result").text(rate.toFixed(2));
}
//calculatePayment()
var raschet = document.getElementById("raschet");
raschet.onclick = calculatePayment;
});
|
Спасибо огромное все вышло ) , :)
Я вам просто кусок кода привел выше ) я не трогал весь код , Совсем заработался. ) Спасибо Вам еще раз. |
Подскажите , как по моему коду, сделать
Отображение Ползунков только при выборе Программы <select id="my_select" name="my_select"> <option value="12">Авто</option> <option value="10">Недвижимость</option> <option value="15">Экспресс</option> </select> И как сделать что бы при выборе например Авто Значения менялись Например так Если выбрано Авто , то
$("#amount_slider").slider({
orientation: "horizontal",
range: false,
min: 100,
max: 200,
value: 100000,
step: 10000,
slide: function (event, ui) {
$("#amount").text(ui.value);
//calculatePayment()
}
});
$("#amount").text($("#amount_slider").slider("value"));
Если выбрана Недвижомость то
$("#amount_slider").slider({
orientation: "horizontal",
range: false,
min: 1000000,
max: 2000000,
value: 100000,
step: 10000,
slide: function (event, ui) {
$("#amount").text(ui.value);
//calculatePayment()
}
});
$("#amount").text($("#amount_slider").slider("value"));
|
zeusrvp,
для начала - минимум 100 максимум 200 откудаже value стотысяч и шаг 10000 читайте медитируйте над документацией на Ползунок UI и может в раздел работа если быстро нужно? или пробуйте писать код ... Здравствуйте! Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. |
Я тока изучаю JavaScript, извините
я 1С ник , Решил проблему с отображением при селекторах , так,
$(document).ready(function(){
$("#amount_slider, #time_slider, #amount, #time").hide();
$("select#my_select").change(function(){
var valOpt = $(this).find('option:selected').val();
if(valOpt==0)$("#amount_slider, #time_slider, #amount, #time").hide();
if(valOpt==15){
$("#amount_slider, #time_slider, #amount, #time").show();
}
if(valOpt==12){
$("#amount_slider, #time_slider, #amount, #time").show();
}
if(valOpt==10)$("#amount_slider, #time_slider, #amount, #time").show();
});
});/*end ready*/
А вот выбор диапозона значений при выборе типа кредита не могу сделать , думал в сторону if else // |
zeusrvp,
http://jquery.page2page.ru/index.php5/%D0%9F%D0%BE%D0%BB%D0%B7%D1%83%D0%BD%D0%BE%D0%BA_U I внизу закладка свойства - читаем параметр max -- как узнать как изменить |
Спасибо . А выше код который для скрытия . Посоветуйте укоротить как нибудь если возможно .
|
zeusrvp,
если только в 1 случае скрыть зачем остальное проверять if(valOpt==0) hide else show |
Я так пробывал .. но у меня не пошло что то . Он весь скрылся .. попробую еще раз спасибо ..
По вашей ссылке почитал . Там нет того что я хочу . Зато там нашел оформление как делать . Спасибо .задача в том что бы при выборе например Авто. слайдер принимал значение мин и макс другие. Я вижу тока решение создания дополнильных слайдов amount и скрывать их по той же анологии что выше в коде . Тоесть я выбираю авто... и показывает див с id amount1 а остальные скрывает и так далее по анологии .. мысль есть а знаний не хватает . |
Цитата:
Цитата:
Цитата:
|
Наверное я запутал Вас .
Есть калькулятор. Первое его поле . Выбор типа кредита (автомобиль . Недвижтмость . И экспресс ) После того как поле выбрано . Открываются два параметра сумма и срок . ( эти два параметра как раз и есть ui slider ) в скрипте указываешь значение max и мин для параметра сумма и срок (amount и time ) после нажимаем Рассчитать и выполняется функция расчета и вывода на экран . Все что выше описал работает отлично ( с Вашей конечно помощью ) Но . Приведем пример Для кредита автомобиль условия например От 10 000 до 50000 Для экспресс от 20000 до 30000 И для недвижимость от 60000 до 100000 Так вот в слайде мы указываем параметры один раз для amount и time например amount у нас от 100000 до 500000 и все . Для всех типов кредитов мин и макс одинаковые . А мне необходимо что бы при выборе вида кредита менялся и слайд.. я пробыва через if else не вышло цепляет только первые значения .. И вот вопрос . Я как до компа дьберусь хочу проверить .. Создать дивы например . Avto . House и express.. для них прописать джеквери слайдер этот в скрипте и вызывать на экран при выборе .. у меня идея такая.. Какие есть у Вас ? |
Цитата:
|
Теоритически эти велечины и будут мин макс для конкретной переменной . Тока надо засунуть в код их стока скока мне надо и проверить как это все заработает )
|
Цитата:
|
Все уже работает ) спасибо . Все развернуто зато в теме получилось . Может кому то пригодится тема и поможет . Спасибо Вам . Не серчайте . Тяжеловато писать после 1с ... хороший форум . Хорошие люди )) :victory:
|
Смена диапазона ползунка slider jquery ui по выбору в селекторе
:write:
<!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/south-street/jquery-ui.css">
<style>
body{
background: #FFCC00
}
#time_slider, #amount_slider{
margin:45px;
width:500px;
height:12px;
background-image:-webkit-gradient(linear,left,right,color-stop(0,#00FF7F),color-stop(1,#008000));
background-image:-ms-linear-gradient(left,#00FF7F,#008000);
background-image:-o-linear-gradient(left,#00FF7F,#008000);
background-image:-moz-linear-gradient(left,#00FF7F,#008000);
background-image:-webkit-linear-gradient(left,#00FF7F,#008000);
background-image:linear-gradient(to right,#00FF7F,#008000);
border:#000000 1px solid;
}
#time_slider{
margin-top: 100px;
}
#show, #sh{
position:relative;
width:60px;
height:30px;
top:5px;
left:5px;
display:block;
float:left;
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
font-size: 24px;
}
.car:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/TECHNIKS/CARS/1T2.GIF);
width:60px;
height:45px;
display:inline-block;
position:relative;
top:-5px;
left:5px;
}
.house:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/DOM/buildings/HOUSE13.GIF);
width:45px;
height:45px;
display:inline-block;
position:relative;
top:-25px;
left:12px;
}
.money:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/OTHERS/MONEY/DOLLAR4.GIF);
width:28px;
height:45px;
display:inline-block;
position:relative;
top:-17px;
left:21px;
}
.time:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/DOM/CLOCKS/30R3.GIF);
width:35px;
height:45px;
display:inline-block;
position:relative;
top:-38px;
left:30px;
}
.ui-slider-handle{
font-size:14px;
padding:2px 12px 5px 5px;
box-shadow:0 0 1px rgba(0,0,0,0.3),0 3px 7px rgba(0,0,0,0.3),inset 0 1px rgba(255,255,255,1),inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius:5px;
background:-ms-linear-gradient(#eeefef,#ffffff 10%);
background:-o-linear-gradient(#eeefef,#ffffff 10%);
background:-moz-linear-gradient(#eeefef,#ffffff 10%);
background:-webkit-linear-gradient(#eeefef,#ffffff 10%);
background:linear-gradient(#eeefef,#ffffff 10%);
text-align:center;
text-decoration:none;
}
.ui-slider-horizontal .ui-slider-handle{
top:-7px;
}
h3{
display: inline-block;
text-align: center;
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
}
#amount{
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
font-size: 24px;
width: 80px;
}
</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>
</head>
<body>
<select id="my_select" name="my_select">
<option value="12">Авто</option>
<option value="10">Недвижимость</option>
<option value="15">Экспресс</option>
</select>
<h3>10000 - 50000</h3>
<div id="show" class="car">10000</div>
<div id="amount_slider"></div>
<input type="text" name="amount" id="amount">
<div id="sh" class="time">1</div>
<div id="time_slider"></div>
<script>
$("#amount_slider").slider(
{
range: false,
min: 10000,
max: 50000,
value: 15000,
step: 1000,
change: function(event, ui) {
var offset = $(ui.handle).offset();
$("#show").html(ui.value).offset({top: offset.top-20, left: offset.left-18})
$("#amount").val(ui.value);
},
slide: function(event, ui) {
var offset = $(ui.handle).offset();
$("#show").html(ui.value).offset({top: offset.top-20, left: offset.left-18});
$("#amount").val(ui.value);
}
}
);
$("#amount_slider").slider("option", "value", 10000);
$("#my_select").change(function ()
{
var min =[10000, 60000, 20000][this.selectedIndex],
max =[50000, 100000, 30000][this.selectedIndex],
cls =["car", "house", "money"][this.selectedIndex];
$("#amount_slider").slider("option", "max", max);
$("#amount_slider").slider("option", "min", min);
$("#amount_slider").slider("option", "value", min);
$("#show").removeClass().addClass(cls);
$("h3").text(min + " - " + max);
}
)
$("#time_slider").slider(
{
range: false,
min: 0,
max: 60,
value: 12,
step: 6,
change: function(event, ui) {
var offset = $(ui.handle).offset();
$("#sh").html(ui.value).offset({top: offset.top, left: offset.left-28})},
slide: function(event, ui) {
var offset = $(ui.handle).offset();
$("#sh").html(ui.value).offset({top: offset.top, left: offset.left-28})}
}
);
$("#time_slider").slider("option", "value", 12);
$("#amount").on("input", function () { //или "change" вместо "input"
var min = $("#amount_slider").slider("option", "min"),
max = $("#amount_slider").slider("option", "max"),
val = +this.value;
if(val >= min && val <= max)$("#amount_slider").slider("value", val);
});
</script>
</body>
</html>
|
Вы просто монстр javascript ) спасибо
|
Опять есть маленькая просьба , )
добавить вывод в текстовой поле , что бы при ввода значения менялся бегунок . по типу того как здесь http://webformyself.com/wp-content/u...emo/price.html слайдер крутится и его данные идут в поле .. где его ручками можно править , <input type="text" name="amount" id="amount"> В том примере что выше , пробовал впихнуть в мой код, и так и сяк , и див отдельный делал , пытаюсь понять код который на страничке с примером но увы чуток знаний не хватает . Вроде все верно делаю , и зараза не показывает. не вышло что то . |
zeusrvp,
добавлено изменение положения ползунка по вводу в input -- смотрите код выше |
Цитата:
Все так же было как у Вас , но не работало , У меня вот было $("#amount").html(abc2(ui.value)) $("#amount").val(ui.value); Abc2 это у меня преобразования функция.. в тысячные.. ну там 10000 отображается 10 000 Сделал так , из за дублирования .. $("#amount").html(abc2(ui.value)) $("#amount1").val(ui.value); и все встало на места ) спасибо Вам ) |
Цитата:
|
| Часовой пояс GMT +3, время: 02:12. |