Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
dproshin
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 4
1

Добавить кнопки "плюс" и "минус" калькулятору

02.04.2015, 23:15. Просмотров 1491. Ответов 4
Метки нет (Все метки)

Добрый день!
Есть калькулятор с ползунком.
Задача поставить кнопки + и - чтобы при нажатии на них положение ползунка менялось на шаг++
Подскажите как это сделать?

Вот код калькулятора:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    div.demo { padding: 10px !important; width: 1000px;}
    .ui-widget{font-size: 0.6em !important;}
    </style>
    <script>
    $(function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 5,
            max: 500,
            value: 1,
            step: 0.5,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
                calc();
            }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    });
    $(function() {
        $( "#slider-range-max2" ).slider({
            range: "max",
            min: 6,
            max: 120,
            value: 12,
            slide: function( event, ui ) {
                $( "#amount2" ).val( ui.value );
                calc();
            }
        });
        $( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );
    });
 
    function calc(par){
    amount = document.cl_form.amount.value;
    amount2 = document.cl_form.amount2.value;
 
    //var summ;
    summ =  0.01 * Number(amount) * 1000 ;
    summ2 =  0.02 * Number(amount) * Number(amount2) ;
    summ = summ.toFixed(0);
    summ2 = summ2.toFixed(2);
    document.cl_form.summ.value=summ;
    document.cl_form.summ.value=summ2;
    //document.getElementById("amounttd").innerHTML=amount;
    //document.getElementById("amount2td").innerHTML=amount2;
    document.getElementById("summ").innerHTML=summ;
    document.getElementById("summ2").innerHTML=summ2;
    return false; 
    }
    </script>
</head>
<body>
<form name="cl_form">   
<div class="demo">
<p>
    <label for="amount">Сумма займа:</label>
    <input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
    <label for="amount">млн. руб.</label>
</p>
<div id="slider-range-max"></div><a href="#" onclick="document.getElementById("amount").value=10; calc(document.getElementById("amount").value);">+</a>
<p>
    <label for="amount2">Срок займа:</label>
    <input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
    <label for="amount2">мес.</label>
</p>
<div id="slider-range-max2"></div>
<p>
    <label for="summ">ВАШ ПЛАТЕЖ:</label>
    <input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="hidden">
    <input value="0" name="summ2" readonly="readonly" maxlength="10" size="5" type="hidden">
</p>
<p>
                <!-- Вывод значений на ползунках
                
                ВНИМАНИЕ для работы раскомментировать текст в скрипте
                
                1st: <p id="amounttd">0</p>
                2nd: <p id="amount2td">0</p>
                -->
                платеж: <span id="summ">50</span> тыс. рублей<br />
                сумма: <span id="summ2">1.20</span> млн. рублей
</p>
</div>
</form>
</body>
</html>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.04.2015, 23:15
Ответы с готовыми решениями:

Как добавить обработчик клика по "document" внутри цикла "for"?
Здравствуйте! Есть такой кусок куда как $(document).on('click', '#calcA', function() {...

Тип даных JQuery var ["dffd","dfdf","fffd"]
Работаю с типом таким var availableTags = ; если использую source: availableTags то...

Цикл: по каждому клику на "unload" крайний блок должен исчезнуть, по "load" восстановиться. Ц
Здравствуйте. Я начал осваивать jquery самостоятельно по задачнику в интернете, поэтому иногда...

Как сделать, чтобы результат показывался при клике на id="txtDate" без onclick="getdate()"?
&lt;p&gt;Date: &lt;input id=&quot;txtDate&quot; type=&quot;text&quot; /&gt; &lt;/p&gt; &lt;p&gt; &lt;input...

При отправке данных с формы на почту, из-за Jquery, там где type="password" приходят не символы, а "****"
&lt;!DOCTYPE html &gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt; ...

4
nrobert
169 / 152 / 66
Регистрация: 11.02.2015
Сообщений: 450
03.04.2015, 10:37 2
Пример.
Javascript
1
2
3
4
5
6
    $('#plus').on('click',function(){
        var el=$('#slider-range-max'),value=el.slider('value'),step=el.slider('option','step'),newvalue=value+step;
        el.slider('value',newvalue);
        $('#amount').val(newvalue);
        calc();                               
    });
0
dproshin
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 4
03.04.2015, 14:04  [ТС] 3
Спасибо огромное! Вижу что пример работает.
Но когда копирую код в отдельный файл перестает работать....
Не могу понять почему.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    div.demo { padding: 10px !important; width: 1000px;}
    .ui-widget{font-size: 0.6em !important;}
    </style>
    <script>
$(function(){
    $('#slider-range-max').slider({
        range: 'max',
        min: 5,
        max: 500,
        value: 1,
        step: 0.5,
        slide: function(event,ui){
            $('#amount').val(ui.value);
            calc();
        }
    });
    
    $('#amount').val($('#slider-range-max').slider('value'));
    
    $('#plus').on('click',function(){
        var el=$('#slider-range-max'),value=el.slider('value'),step=el.slider('option','step'),newvalue=value+step;
        el.slider('value',newvalue);
        $('#amount').val(newvalue);
        calc();                               
    });
});
    $(function(){
        $('#slider-range-max2').slider({
            range: 'max',
            min: 6,
            max: 120,
            value: 12,
            slide: function( event, ui ) {
                $('#amount2').val( ui.value );
                calc();
            }
        });
        
        $('#amount2').val($('#slider-range-max2').slider('value'));
    });
 
function calc(par){
    amount = document.cl_form.amount.value;
    amount2 = document.cl_form.amount2.value;
 
    //var summ;
    summ =  0.01 * Number(amount) * 1000 ;
    summ2 =  0.02 * Number(amount) * Number(amount2) ;
    summ = summ.toFixed(0);
    summ2 = summ2.toFixed(2);
    document.cl_form.summ.value=summ;
    document.cl_form.summ.value=summ2;
    //document.getElementById("amounttd").innerHTML=amount;
    //document.getElementById("amount2td").innerHTML=amount2;
    document.getElementById("summ").innerHTML=summ;
    document.getElementById("summ2").innerHTML=summ2;
    return false; 
}
    </script>
</head>
<body>
<form name="cl_form">   
    <div class="demo">
        <p>
            <label for="amount">Сумма займа:</label>
            <input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
            <label for="amount">млн. руб.</label>
        </p>
        <div id="slider-range-max"></div>
        <a href="#" id="plus">+</a>
        <p>
            <label for="amount2">Срок займа:</label>
            <input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
            <label for="amount2">мес.</label>
        </p>
        <div id="slider-range-max2"></div>
        <p>
            <label for="summ">ВАШ ПЛАТЕЖ:</label>
            <input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="hidden"/>
            <input value="0" name="summ2" readonly="readonly" maxlength="10" size="5" type="hidden"/>
        </p>
        <p>
                <!-- Вывод значений на ползунках
                
                ВНИМАНИЕ для работы раскомментировать текст в скрипте
                
                1st: <p id="amounttd">0</p>
                2nd: <p id="amount2td">0</p>
                -->
                платеж: <span id="summ">50</span> тыс. рублей<br />
                сумма: <span id="summ2">1.20</span> млн. рублей
        </p>
    </div>
</form>
</body>
</html>
0
nrobert
169 / 152 / 66
Регистрация: 11.02.2015
Сообщений: 450
03.04.2015, 15:51 4
Метод on() работает только на версии не ниже 1.7: у вас 1.4.
0
dproshin
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 4
03.04.2015, 18:54  [ТС] 5
Спасибо большое! На версии 7 все работает как надо!!!
0
03.04.2015, 18:54
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.04.2015, 18:54

input "file" убрать тип "все файлы"
Можно ли при помощи accept это как то сделать? Грубо говоря оставить только картинки. Или...

Что означает строка $("#tabs li:first").addClass("current");?
В оглавлении и так всё сказано. Буду благодарен за помощь, желательно побыстрее. Добавлено через...

Фильтр по столбцам в DataTable используя символы ">" и"<"
Добрый день. Я пытаюсь реализовать фильтр по столбцам в элементе DataTable с возможностью...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru