Сохраните Ваши сбережения и получайте стабильный доход до 13.50% годовых

Все вклады застрахованы
Top 3 reasons to choose us
Everyday we work hard to make life of our clients better and happier
-1-
High Quality
We are the leading firm by delivering quality and value to our clients. We like what we do. We like to make people happy.
-2-
Unique Experience
All our professionals have more than 5 years of legal experiences. They use their knowledge to make our clients life better.
-3-
Good Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night.
В соответствии с действующей ключевой ставкой ЦБ РФ и Базовым стандартом совершения кредитным потребительским кооперативом операций на финансовом рынке, начиная с 17.01.2018г. максимальная ставка на привлечение сбережений для всех КПК не может превышать 13.50%
Хочу разместить
На срок (месяцев)
Ежемесячное пополнение
Contact Us
We like to speak to our clients and share useful content. Follow us through the links below and be happy.
Write us:

Делаем калькулятор для расчёта денежного вклада
в Tilda

Код калькулятора приведён ниже

Код вставлен в блок ДРУГОЕ►Т123

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script>
$(document).ready(function(){
    
    var vloj =25000;
    var proc = 0.135;
    var srok = 3;
    var dohodnost = 0;
    var poluchi = 0;
    
    var korzina = 0;
    var sumpop = 0;
   
    var i = 0;
    var arr1 = [];
    var procentnakop = 0;
    var summaitog = 0;
    var  popolnil = 0;
    var znach1 = 0;
    var znach2 = 0;
    
    
    
    //Добавляем ползунок 1
    $(".t-input-group:eq(0)").append("<div id='slider1'></div>");
//Добавляем подписи к 1 ползунку    
    $(".t-input-group:eq(0)").append("<div class='metka1'>25 000</div>");
    $(".t-input-group:eq(0)").append("<div class='metka2'>3 000 000</div>");

//Добавляем ползунок 2
    $(".t-input-group:eq(2)").append("<div id='slider2'></div>");
//Добавляем подписи к 2 ползунку    
    $(".t-input-group:eq(2)").append("<div class='metka1'>0</div>");
    $(".t-input-group:eq(2)").append("<div class='metka2'>500 000</div>");    
 
//Перемещаем кнопку
//Убираем кнопку формы..
  $(".t-form__submit").empty();
  $("#rec48935116").appendTo(".t-form__submit"); 

//Очищаем поля для месяцев
$(".t-input-group_in .t-input-block").empty();

//Добавляем кнопки месяцев
$(".t-input-group_in .t-input-block").append("<div class='mont1 mont'>3</div><div class='mont2 mont'>6</div><div class='mont3 mont'>9</div><div class='mont4 mont'>12</div><div class='mont5 mont'>24</div><div class='mont6 mont'>36</div>");

//ДОбавляем итоговы поля
$(".t690 .t-form__submit").prepend("<div class='label1'>Вы получите</div><div class='label2'>Застраховано</div><div class='itog'>25844&#8381;</div><div class='procent'>Ставка: <span>13,50%</span></div><div class='dohod'>Доход: <span>844&#8381;</span></div>")

//ДОбавляем подпись под формой
$("#form48808476").append("<div class='podpisi'>* расчет не является офертой. Расчет произведен по программе «Ежегодный доход».<br> Точный расчет по договору предоставляется в офисах продаж.</div>");
   
 

    
    
  

function checkall(){
  //Функция итого
               while (i < srok) { 
               sumpop = popolnil*i;
               poluchi = ((vloj+sumpop)*proc*1)/12;
               arr1[i]=poluchi;
                i++;
                };
                i = 0;
                
              
                procentnakop = parseInt(eval(arr1.join("+")));
                summaitog = vloj + sumpop + procentnakop;
                
                summaitog= summaitog.toFixed();
                dohodnost = poluchi - vloj;
                $(".itog").html(summaitog + ' &#8381;');
                $(".dohod>span").html(procentnakop + ' &#8381;');
                arr1.length=0;
              
};



//Меняем кол-во месяцев при клике на кнопки
$('.mont1').click(function(){srok=3});
$('.mont2').click(function(){srok=6});
$('.mont3').click(function(){srok=9});
$('.mont4').click(function(){srok=12});
$('.mont5').click(function(){srok=24});
$('.mont6').click(function(){srok=36});


//Клик по месяцам
 $(".mont1").addClass("montac");

$('.mont').click(function(){
  $(".mont").removeClass("montac");  
  $(this).addClass("montac");
  checkall();
  
});


	     $( "#slider1" ).slider({
				value : 25000,//Значение, которое будет выставлено слайдеру при загрузке
				min : 25000,//Минимально возможное значение на ползунке
				max : 3000000,//Максимально возможное значение на ползунке
				step : 1,//Шаг, с которым будет двигаться ползунок
				create: function( event, ui ) {
					val = $( "#slider1" ).slider("value"); //При создании слайдера, получаем его значение в перемен. val
					$( "[name='razmest']" ).val( val + ' \u20BD' ); //Заполняем этим значением элемент поля
				},
               
                slide: function( event, ui ) {
               
                $("[name='razmest']" ).val( ui.value + ' \u20BD' );//При изменении значения ползунка заполняем элемент поля
                vloj = ui.value;
                
                checkall();
                
                
                //Фон для ползунка  
                $(".t-input:eq(0)").css("background" , "#ffffff");
              
                
            }   
          
            
            
        });
        
         $( "#slider2" ).slider({
				value : 0,//Значение, которое будет выставлено слайдеру при загрузке
				min : 0,//Минимально возможное значение на ползунке
				max : 500000,//Максимально возможное значение на ползунке
				step : 1,//Шаг, с которым будет двигаться ползунок
				create: function( event, ui ) {
					val = $( "#slider2" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
					
					$( "[name='popoln']" ).val( val + ' \u20BD' );//Заполняем этим значением элемент поля
				},
            slide: function( event, ui ) {
				$("[name='popoln']" ).val( ui.value + ' \u20BD' );//При изменении значения ползунка заполняем элемент поля
                
                 popolnil = ui.value;
                 
                 checkall();
                
                
            }
        });






 
 
//Разрешить ввод только цифр в полях  ввода
$("[name='razmest'] , [name='popoln']").bind("change keyup input click", function() {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9]/g, '');
};
});     
 
 
//Настройки 1 ползунка 
//При нажатии клавиш в ползунке 1 
$('.t-input:eq(0)').keyup( function() {
     
        znach1 = $(this).val();
//Присваиваем значение ползунку        
        $("#slider1").slider("value", znach1);
       
        
        

  
        
//Ограничиваем кол-во цифр  
        if($(this).val().length > 7){
            $(this).val($(this).val().substr(0, 7));       
            
        };
//Если больше , то пишем предел  
    if (znach1>3000000){
        $( "[name='razmest']" ).val(3000000);
    };
    
    
       vloj = $("#slider1").slider("value");
       
       checkall();
    
    
    
    
//Фон для ползунка  
    if ( znach1<25000 ){
      $(this).css("background" , "#c4d1d1");
        }else { 
            $(this).css("background" , "#ffffff");
        };
        
    
        
        
        
       
        
        
 });
    
//Настройки 2 ползунка 
//При нажатии клавиш в ползунке 2
$('.t-input:eq(1)').keyup( function() {
        znach2 = $(this).val();
//Присваиваем значение ползунку        
        $("#slider2").slider("value", znach2);
        
//Ограничиваем кол-во цифр  
        if($(this).val().length > 6){
            $(this).val($(this).val().substr(0, 6));       
            
        };
//Если больше , то пишем предел  
    if (znach2>500000){
        $( "[name='popoln']" ).val(500000);
    };
    
    
     popolnil = $("#slider2").slider("value");
       
     checkall();

    
    
 });
 
});
</script>

<style>
    .ui-slider-handle {
    width: 15px !important;
    height: 15px  !important;
    border-radius: 15px 15px 15px 15px  !important;
    -webkit-border-radius: 15px 15px 15px 15px  !important;
    background: -webkit-linear-gradient(top, #e4cc3d, #fee664)  !important;
    background: -o-linear-gradient(top, #e4cc3d, #fee664)  !important;
    background: -ms-linear-gradient(top, #e4cc3d, #fee664)  !important;
    background: linear-gradient(top, #e4cc3d, #fee664)  !important;
    border: none  !important;
    top: 50%  !important;
    margin-top: -7px  !important;
    margin-left: -1px  !important;
    cursor: pointer  !important;
    outline: none  !important;
}

.ui-widget {
    font-size: 0.1em !important;
}    

  /*Отступы слайдера*/
#slider1 , #slider2{
    margin-right: 20px;
    margin-top: 15px;
}
  



/*Позиция для подписей слайдеров*/
    .metka1 {
    position: absolute;
    font-family: Roboto;
    color: #bdbdbd;
    font-size: 12px;
    margin-top: 10px;
}
/*Позиция для подписей слайдеров*/    
    .metka2 {
    float: right;
    margin-right: 20px;
    font-family: Roboto;
    color: #bdbdbd;
    font-size: 12px;
    margin-top: 10px;
}
/*Вертикальное положение элементов*/
.t690 .t-input-group {
    vertical-align: top !important;
}
/*Эффект кнопки при наведении*/
#rec48935116 .t-btn:not(.t-animate_no-hover):hover {

}
/*Плавность эффекта для кнопки*/
.t142__submit {
    transition:all 0.3s cubic-bezier(0, 0, 0.8, 1.0) !important;
}
/*Настройки месяцев*/
.mont {
    background: #ececec;
    float: left;
    padding: 8px;
    box-shadow: 0px 1px 3px 0px #5d5d5d;
    font-family: Roboto;
    color: #3c3c3c;
    font-size: 12px;
    margin-top: 10px;
    
}
/*Настройки месяцев при наведении*/
.mont:hover , .montac {
    background: #79d800;
    color:#ffffff;
    cursor:pointer;
}    
/*Настройки подложки для формы*/
#form48808476 {
    background: rgba(253, 253, 254, 0.8);
    padding: 50px 50px 50px 50px;
    border-radius: 30px;
    box-shadow: 3px 3px 0px 1px #7ACBFA;
    border: 1px solid #b5b5b5;
}
/*Настройки месяцев отступ*/
.t-input-group_in {
    padding-left: 60px !important;
}

/*Настройки месяцев*/
.mont1 {
    border-radius: 7px 0px 0px 7px;
}
/*Настройки месяцев*/
.mont6 {
    border-radius: 0px 7px 7px 0px;
}
/*Настройка блока с кнопкой*/
.t690 .t-form__submit {
    box-shadow: 0px 0px 20px 0px  #cecece;
    background: #f0f2ff;
    border-radius: 30px;font-family: Roboto;
    color: #3c3c3c;
    font-size: 12px;
    padding: 10px 10px 20px 10px;
    
}

/*Итоги внешний вид*/
.label1 {
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 0 15px;
    padding: 3px;
    color: #5d5d5d;
}
.label2 {
    float: right;
    font-size: 16px;
    font-weight: 200;
    color: #ffffff;
    background: #7ACBFA;
    margin: 10px 10px 0 0;
    border-radius: 10px;
    padding: 3px;
}
.itog {
    clear: both;
    text-align: center;
    color: #8dde26;
    font-size: 30px;
    font-weight: 800;
    padding-top: 15px;
    padding-bottom: 10px;
}
.procent {
    float: left;
    font-size: 16px;
    
    margin: 10px 0 0 15px;
    padding: 3px;
    color: #5d5d5d;
}
.dohod {
    float: right;
    font-size: 16px;
    
    color: #5d5d5d;
   
    margin: 10px 10px 0 0;
    border-radius: 10px;
    padding: 3px;
}
.procent span , .dohod span{
    font-weight: 700;
}

/*Подпись под формой*/
.podpisi{
    font-family: Roboto;
    color: #bdbdbd;
    font-size: 12px;   
    margin-top: -30px;
}
/*Высота полей ввода*/
.t-input {
    height: 40px !important;
}    
/*Ширина блоков*/
.t690 .t-input-group {
    width: 40% !important;
}

@media screen and (max-width: 1200px){
.t-input-group_in  {
    padding-left: 20px !important;
}
}

@media screen and (max-width: 960px){
.t-input-group_in  {
    margin-top: 50px;
    padding-left: 0px;
}
[data-input-lid="1495122982159"] {
    margin-top: 70px;
}
.podpisi {
    margin-top: 30px;

}
.t690 .t-input-group {
    width: 100% !important;
}
.t690 .t-form__submit {
    margin-top:50px;
    width: 100% !important;
}
.t690 .t-col_12{
   width: 450px !important;  
}
.t690 .t-container {
    max-width: 450px !important;
}
}

@media screen and (max-width: 450px){
.t690 .t142__submit {
    font-size: 14px;
    font-weight: 200;
    margin-top: 20px;
    height: 50px;
    line-height: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    
}
}
    
</style>
Made on
Tilda