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

Question

[Дмитрий]

Ребят, помогите реализовать такой калькулятор. С 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>

Answer 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>

Подходит?

Comments

[Дмитрий]

По коду вижу что что-то похожее. Но запустить пока не получилось. Сижу разбираюсь)
prntscr.com/a9qlgf

так же вижу 2 id в строке

<input class="form-control" id="lastDay" type="date" name="calendar" id="targetDay">

[OVK2015]

Дмитрий Крымцев:
C id,- это я ваш не увидел. Подправил ответ.
А по поводу ошибки,- что такое calc.php?

[Дмитрий]

OVK2015: это я отдельно сделал calc.php где разместил отредактированный вами код. Есть какое-то обязательство, чтобы все было на index.php?

[Дмитрий]

Убрал calc.php и все положил на index.php

krimtsev.tk

[OVK2015]

Дмитрий Крымцев:
В смысле обязательство? Я писал на обычном js, php вообще не трогал. Этому скрипту все равно из какого php скрипта его отдают браузеру. Ему только важно, чтобы ранее были подключены две библиотеки jQuery.js и momemt.js

[OVK2015]

Дмитрий Крымцев:
А вот 6 ошибок об undefined похоже говорят, что momemt.js он и не видит

[Дмитрий]

OVK2015: ну в коде на скрипт ссылка видна, и она рабочая krimtsev.tk/js/moment-with-locales.js

[Дмитрий]

OVK2015: впервые сталкиваюсь с moment.js

[OVK2015]

Дмитрий Крымцев:
Посмотрел ваш пример. Из библиотек загружена и подключена только jQuery. moment.js отсутствует. Такое ощущение, что он пробует инициализироваться и где-то внутри нее происходит сбой. Попробуйте подключить не от себя, а напрямую с их сайта

[Дмитрий]

Действительно! Заработало, спасибо!

[OVK2015]

Дмитрий Крымцев:
Таки да. Видать вам как-то удалось битую скачать :)

[OVK2015]

Дмитрий Крымцев:
Не за что. Я, не знаю всей структуры расчетов: надо там было высчитывать оплату за день или можно сразу константы в массив положить.
А moment.js работы с датами в этом случае крайне полезная штука. Без нее там кода раза в 3 точно больше было бы.

[Дмитрий]

OVK2015: а если подключить eternicode.github.io/bootstrap-datepicker/?markup=... ?

[OVK2015]

Дмитрий Крымцев:
Я думаю сложностей быть не должно. Единственно что, там формат даты отличается от того, кот. сейчас используете. Если moment сразу подхватит,- вопросов не будет. Если не подхватит,- обращайтесь.

[Дмитрий]

Можно ваши контакты?

[OVK2015]

Дмитрий Крымцев:
ICQ: 665750467

Answer 2

[nikfakel]

Луганские домашние сети, заплатите 30 баксов фрилансерам, они вам все сделают)

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

Comments

[Дмитрий]

Ну во-первых, я писал здесь от своего имени, а не компании.
Во-вторых, это нужно лично для меня и я как и все пытаюсь сделать свой калькулятор на JS.

Я считаю Ваш ответ оскорбительным, т.к. выше я нигде не указывал информации о моей деятельности и Вы пошли дальше, проверив эту информацию.

Да и ответ в целом, не содержит ничего того чтобы я не знал.