Скрипт калькулятора?

Ребят, помогите реализовать такой калькулятор. С JS на длинной руке :)

Должно получится вот такое prntscr.com/a9ojle

Работает так:
Калькулятор, который будет рассчитывать сумму денег, на которую надо пополнить счет чтобы её хватило до N числа.
С возможностью выбора определенного тарифа.

Допустим на счету у абонента 10 рублей, и сегодня 1 число. ему надо высчитать сумму до 10 числа.
с учетом того, что у него тариф:
100 (200\300\400) рублей в 30 дней

Что я имею сейчас:

$('document').ready(function() {
	var sum = (targetDay - currentDay) * (tarif / 30) + currentBalance

	targetDay = new Date("21 May 2016"); // день, до которого надо оплатить

	currentDay = new Date("25 May 2016"); // текущий день

	tarif = parseInt(tarif);
	tarif = 150; // тариф пользователя

	currentBalance = $('#currentBalance').val(); // сколько сейчас на счету

	alert ('sum');
});


<div class="col-lg-4 col-lg-offset-4">
<h2 class="text-center">Калькулятор оплаты</h2>
<table class="table table-bordered">
<tr>
<td><p class="text-right form-control-static">На счету абонента, руб.:</p></td>
<td><input class="form-control" type="number" id="currentBalance" value="2" placeholder="укажите сумму"/></td>
</tr>
<tr>
<td><p class="text-right form-control-static">Сегодня:</p></td>
<td><input class="form-control" id="currentDay" type="date" name="calendar"/></td>
</tr>
<tr>
<td><p class="text-right form-control-static" >До какого числа желают оплатить?</p></td>
<td><input class="form-control" type="date" name="calendar" id="targetDay"></td>
<tr>
<td><p class="text-right form-control-static">Тариф абонента:</p></td>
<td>
	<select class="form-control" id="tarif">
		<option>Тариф "Мини"</option>
		<option>Тариф "Безлим 4"</option>
		<option>Тариф "Безлим 10"</option>
		<option>Тариф "Безлим 35"</option>
		<option>Тариф "Jump 5"</option>
		<option>Тариф "Jump 10"</option>
		<option>Тариф "Jump 35"</option>
		<option>Тариф "Jump 70"</option>
	</select>
</td>
</tr>
<tr>
<td><p class="text-right form-control-static">К оплате, руб:</p></td>
<td><input class="form-control" type="text" id="sum" readonly/></td>
</tr>
<tr>
<td colspan="2" class="text-right">
<button class="btn btn-info">Поехали!</buttons>
</td>
</tr>
</table>
  • Вопрос задан
  • 360 просмотров
Решения вопроса 1
@OVK2015
Вот вам простейший скрипт

<script type="text/javascript" src="http://localhost/script/js/jquery/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="http://localhost/script/js/MomentJS/moment-with-locales.min.js"></script>
	<script type="text/javascript">				

$(document).ready(function()
{	
  var tarifs = new Array(100, 200, 300, 400, 500, 600, 700, 800);
  $('.btn-info').bind('click', evalResult);
  
  function evalResult()
  {    
    var temp = $('.form-control1');
    temp.css({'display': 'none'});
    var payByMonth = tarifs[$('.form-control option:selected').val()];
    var startDateInterval = moment($('#currentDay').val());    
    var endDateInteval = moment($('#targetDay').val());
    var timeInterval = parseInt(startDateInterval.to(endDateInteval, true).split(' ')[0]) + 1;

    var dayInCurrentMonth = moment($('#targetDay').val().substr(0, $('#targetDay').val().lastIndexOf('-')), "YYYY-MM").daysInMonth();

    var payByDay = payByMonth / dayInCurrentMonth;
    var totalAmount = timeInterval * payByDay - parseInt($('#currentBalance').val());

    $('#sum').val(totalAmount.toFixed(2));
  }
});
</script>


Только поменяйте
<tr>
    <td><p class="text-right form-control-static" >До какого числа желают оплатить?</p></td>
    <td>
      <input class="form-control" id="lastDay" type="date" name="calendar" id="targetDay">
    </td>
    <tr>
    <td><p class="text-right form-control-static">Тариф абонента:</p></td>
    <td>
      <select class="form-control" id="tarif">
        <option value="0">Тариф "Мини"</option>
        <option value="1">Тариф "Безлим 4"</option>
        <option value="2">Тариф "Безлим 10"</option>
        <option value="3">Тариф "Безлим 35"</option>
        <option value="4">Тариф "Jump 5"</option>
        <option value="5">Тариф "Jump 10"</option>
        <option value="6">Тариф "Jump 35"</option>
        <option value="7">Тариф "Jump 70"</option>
      </select>
    </td>
    </tr>


Подходит?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@nikfakel
Веб-разработчик
Луганские домашние сети, заплатите 30 баксов фрилансерам, они вам все сделают)

Чтобы получилось хорошо, тут надо учесть и чтобы дату не выбрали раньше текущего дня, и какой-нить дэйтпикер прикрутили. Ваш скрипт по частям вроде в верном направлении движется, но в целом можно выкинуть :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы