Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрипт подсчета коммунальных услуг (https://javascript.ru/forum/misc/55697-skript-podscheta-kommunalnykh-uslug.html)

dark_mc 10.05.2015 18:18

Скрипт подсчета коммунальных услуг
 
Доброго времени суток! Пишу диплом и столкнулся с задачей которую не могу решить, точнее не знаю каким методом решить ее, сам изучаю javascript не очень то давно, надеюсь вы подскажете что и как!

И так, задача состоит в том, что бы изменять значения скрипта на странице в отдельном окне, что бы не трогать сам код! Но при этом он должен запоминать введенные значения при обновлении страницы.

Например в коде изменить цифры на свои, и скрипт должен их запомнить/заменить.
var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }



И другая задача состоит в том что бы результаты подсчета(в самом калькуляторе), сохранить как скриншот либо что то наподобии истории в личный кабинет, подскажите как лучше реализовать такую задачу!? Буду благодарен!

Leon-on12 11.05.2015 10:57

Первое что приходит в голову это localStorage.
Со скриншотом подсказать не могу. Но могу предложить значения калькулятора записывать в localStorage. И при заходе в личный кабинет загружать localStorage соответствующего пользователя ему на компьютер. Или на оборот при регистрации.

dark_mc 11.05.2015 20:16

Я конечно извиняюсь за столь глупый вопрос, но localStorage к каждому вару отдельно нужно привязать? если да,то как связать их, при попытке связать их у меня он не работает.

вот к примеру:
задал поле где будет вводиться значение, присвоил id
<section>
  <form id="form" action="#" method="POST">
  <input id="svet" name="svet" type="text" />
  <input id="svetno" name="svetno" type="text" /> 
</form>
</section>

сам скрипт где задано все
var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }

и скрипт с localStorage:
if (window.localStorage) {
  var svet = document.querySelectorAll('[name]');

  for (var i = 0, length = elements.length; i < length; i++) {
    (function(svet) {
      var name = svet.getAttribute('name');

      svet.value = localStorage.getItem(name) || '';

      svet.onkeyup = function() {
        localStorage.setItem(name, svet.value);
      };
    })(svet[i]);
  }
}

или надо сам скрипт, где сами значения вписаны, туда и дописать localStorage? Честно запутался,облазил много сайтов с примерами, пробовал разные подходы но так ничего и не смог написать что бы работало.


Спасибо за ответ!

Leon-on12 11.05.2015 22:37

Вы как-то очень сложно действуете. Я предлагаю вам создать массив и записать в него все свои данные последовательно. И в localStorage поместить только этот массив.
Это проще чем крутить счётчики.
А так как у вас дискретный набор элеметнов, советую каждому элементу назначить своё конкретное место.
Тогда вам понадобиться всего одно место в localStorage.
Соответственно и с localStorage по сути работать не надо. Надо только загрузить в него свой массив по окончанию работы. Или выгрузить его из localStorage при начале работы.
Думаю что работать с массивом вам будет проще чем с элементами localStoragа.
Хотя понять почему ваше решение с назначением уникального ключа каждой переменной не работает, понять не могу.
----
А если обременить свой код обильными комментариями, или же просто после полной отладки заменять переменные на соответствующие элементы массива, то можно избежать кучи варов, но к сожалению тогда читаемость кода сильно снизиться.
Но если создать отдельный файлик где написать что на что меняется, и если не лень, то каждый раз можно проводить прямую или обратную замену, в зависимости от того что Вы собираетесь делать, запускать или редактировать код.

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

Rise 11.05.2015 23:10

Цитата:

Сообщение от Leon-on12 (Сообщение 370313)
не работает, понять не могу.

elements.length

tsigel 12.05.2015 08:03

Цитата:

Сообщение от dark_mc
И другая задача состоит в том что бы результаты подсчета(в самом калькуляторе), сохранить как скриншот либо что то наподобии истории в личный кабинет, подскажите как лучше реализовать такую задачу!? Буду благодарен!

Есть библиотека html2canvas, может сделать скрин не сложной верстки, но сохранить без сервера не получится.

dark_mc 12.05.2015 15:28

Цитата:

Сообщение от Leon-on12 (Сообщение 370313)
не работает, понять не могу.

Цитата:

Сообщение от Rise (Сообщение 370318)
elements.length

Все исправил, долбал код с утра, значение не заменяет, даже не знаю почему,смотрел связь между кодом калькулятора, localStorage и конечно же там где все задано, может кто то поможет понять почему оно не работает? массив я не создавал потому что будет не понятно что до чего, мне проще как новичку все по отдельности,а не в кучу, дальше уже по ходу изучения языка буду пробовать ставить массивы.

код:
//поле для ввода нового значения
<section>
  <form id="form" action="#" method="POST">
  <input id="svet" name="svet" type="text" />
</form>
</section>
//поле для калькулятора
<table class="style12" style="width: 138px; "> 
            <tbody> 
              <tr> <td>Электричество</td> </tr>
              </tbody>
            </table>
            </td> <td> 
            <table class="style12" style="width: 183px; "> 
            <tbody> 
              <tr> <td> <input id="sS" style="width: 120px; " type="text" onfocus="changeFlag(0);" onkeyup="CalcSum(1);" onkeypress="return isNumberKey(event)">$</td> </tr>
             
              <tr> <td> <input id="sE" type="text" style="width: 120px; " onfocus="changeFlag(1)" ;="" onkeyup="CalcSum(1);" onkeypress="return isNumberKey(event)">квт</td> </tr>
             </tbody>
           </table>
         </td> <td> 
          <table> 
            <tbody> 
              <tr><td>Количество месяцев</td></tr>
             
              <tr><td> <select id="selS" name="D4" onchange="CalcSum(1);"> 
			           <option value="1">1</option> 
					   <option value="2">2</option> 
					   <option value="3">3</option> 
					   <option value="4">4</option> 
					   <option value="5">5</option> 
					   <option value="6">6</option> 
					   <option value="7">7</option> 
					   <option value="8">8</option> 
					   <option value="9">9</option> 
					   <option value="10">10</option> 
					   <option value="11">11</option> 
					   <option value="12">12</option> 
					   </select></td></tr>
              </tbody>
             </table>
         </td> <td><span id="sv"></span><select id="Sel1" name="D4" onchange="CalcSum(1);Show(1);"> 
		 <option value="0">Обычный дом</option> 
		 <option value="1">Дом с электроплитами</option> 
		 </select></td> 
		 <td> &nbsp;</td> </tr>


var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }

localStorage:
if (window.localStorage) {
  var svet = document.querySelectorAll('[name]');

  for (var i = 0, length = svet.length; i < length; i++) {
    (function(svet) {
      var name = svet.getAttribute('name');

      svet.value = localStorage.getItem(name) || '';

      svet.onkeyup = function() {
        localStorage.setItem(name, svet.value);
      };
    })(svet[i]);
  }
}

код с калькулятора:
var flag = 0;

function changeFlag(index) {
    flag = index;
}

function Show(index) {
    switch (index) {
		case 1: 
            {
                var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
                if (snVal == 0) { document.getElementById('sv').innerHTML = svet; } 
                else if (snVal == 1) { document.getElementById('sv').innerHTML = svetno; } 
            } break;
}
}

function CalcSum(usluga) {
    if (flag == 1) {
        switch (usluga) {
            case 1:
                {
                document.getElementById("selS").disabled = false;
                var sE = document.getElementById('sE').value;
         
		var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
				
                var mes = document.getElementById('selS');
                var mesV = mes.options[mes.selectedIndex].value;

if (snVal == 0) { document.getElementById('sS').value = ((sE * svet) * mesV).toFixed(2); }
                else if (snVal == 1) { document.getElementById('sS').value = ((sE * svetno) * mesV).toFixed(2); }
				
            } break;
}
    }
    else if (flag==0) {
        switch (usluga) {
            case 1:
            {
                /*document.getElementById("selS").disabled = true;
                var sS = document.getElementById('sS').value;
                document.getElementById('sE').value = (sS / svet).toFixed(2);*/
				document.getElementById("selS").disabled = true;
                var sS = document.getElementById('sS').value;
                var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
                if (snVal == 0) { document.getElementById('sE').value = (sS / svet).toFixed(2); }
                else if (snVal == 1) { document.getElementById('sE').value = (sS / svetno).toFixed(2); }
            } break;
 }
    }
    var s = 0;
    
    if (document.getElementById('sS').value != null) { s = document.getElementById('sS').value; }
}

function GOS(index)
{
	switch (index) 
	{
        case 1:
		{
		   document.getElementById('sS').focus();
		} break;
		case 2:
		{
		   document.getElementById('sE').focus();
		} break;
}
}


Вот связал все,но почему то оно считает по тому значению, которое задано заранее в варе...как будто не происходит замена.

А может быть дело в библиотеке?

dark_mc 12.05.2015 15:29

Цитата:

Сообщение от tsigel (Сообщение 370349)
Есть библиотека html2canvas, может сделать скрин не сложной верстки, но сохранить без сервера не получится.

Пробовал,не получилось. Но я решил это гораздо проще, прикрепил кнопку для печати страницы и все работает)

Rise 12.05.2015 19:52

Цитата:

Сообщение от dark_mc (Сообщение 370129)
И так, задача состоит в том, что бы изменять значения скрипта на странице в отдельном окне, что бы не трогать сам код!

Трогать все равно придется так что смысла в отдельном окне нет.
Цитата:

Сообщение от dark_mc (Сообщение 370399)
А может быть дело в библиотеке?

Что за библиотека?

dark_mc 12.05.2015 21:23

Цитата:

Сообщение от Rise (Сообщение 370436)
Трогать все равно придется так что смысла в отдельном окне нет.

Хорошо, пусть даже сам код изменится, но как сделать замену?
Цитата:

Сообщение от Rise (Сообщение 370436)
Что за библиотека?

jquery


Часовой пояс GMT +3, время: 16:18.