Скрипт подсчета коммунальных услуг
Доброго времени суток! Пишу диплом и столкнулся с задачей которую не могу решить, точнее не знаю каким методом решить ее, сам изучаю 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;
}
И другая задача состоит в том что бы результаты подсчета(в самом калькуляторе), сохранить как скриншот либо что то наподобии истории в личный кабинет, подскажите как лучше реализовать такую задачу!? Буду благодарен! |
Первое что приходит в голову это localStorage.
Со скриншотом подсказать не могу. Но могу предложить значения калькулятора записывать в localStorage. И при заходе в личный кабинет загружать localStorage соответствующего пользователя ему на компьютер. Или на оборот при регистрации. |
Я конечно извиняюсь за столь глупый вопрос, но 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? Честно запутался,облазил много сайтов с примерами, пробовал разные подходы но так ничего и не смог написать что бы работало. Спасибо за ответ! |
Вы как-то очень сложно действуете. Я предлагаю вам создать массив и записать в него все свои данные последовательно. И в localStorage поместить только этот массив.
Это проще чем крутить счётчики. А так как у вас дискретный набор элеметнов, советую каждому элементу назначить своё конкретное место. Тогда вам понадобиться всего одно место в localStorage. Соответственно и с localStorage по сути работать не надо. Надо только загрузить в него свой массив по окончанию работы. Или выгрузить его из localStorage при начале работы. Думаю что работать с массивом вам будет проще чем с элементами localStoragа. Хотя понять почему ваше решение с назначением уникального ключа каждой переменной не работает, понять не могу. ---- А если обременить свой код обильными комментариями, или же просто после полной отладки заменять переменные на соответствующие элементы массива, то можно избежать кучи варов, но к сожалению тогда читаемость кода сильно снизиться. Но если создать отдельный файлик где написать что на что меняется, и если не лень, то каждый раз можно проводить прямую или обратную замену, в зависимости от того что Вы собираетесь делать, запускать или редактировать код. В качестве упражнения, и когда задолбает проводить замену, а от самого калькулятора будет кипеть мозг, можно отвлечься написанием автоматического заменителя всех варов на соответствующие элементы массива при запуске кода. |
Цитата:
|
Цитата:
Цитата:
код: //поле для ввода нового значения
<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> </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;
}
}
Вот связал все,но почему то оно считает по тому значению, которое задано заранее в варе...как будто не происходит замена. А может быть дело в библиотеке? |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Или такого способа не существует? |
Цитата:
Цитата:
<!--Форма - должна быть формой -->
<form id="form">
<input name="svet" value="0.32300">
<input name="otop" value="5">
<input name="musor" value="6">
</form>
var form = document.querySelector('#form'),
my_calc = {
price: {
svet: "0.32300",
otop: "84.67",
musor: "26.00"
},
load: function () {
var str = localStorage['my_calc_price'];
this.price = JSON.parse(str);
return this;
},
set: function(){
for(var key in this.price){
form.querySelector('input[name="'+key+'"]')
.value = this.price[key];
}
return this;
},
save: function () {
localStorage['my_calc_price'] = JSON.stringify(this.price);
return this;
}
};
form.addEventListener('change', function(){
for(var key in my_calc.price){
//тут проверка всей формы
//присвоение значений
my_calc.price[key] = this[key];
}
my_calc.save();
return false;
});
form.querySelector('input[name="svet"]')
.addEventListener('change', function(e){
//проверка одного из поля, например на числовое значение
if(!this.value || parseFloat(this.value) < 1){
e.preventDefault();
return false;
}
}, false);
my_calc.load().set();
Возможно есть ошибки, не проверял... Гранит науки должен грызться с трудом и потом )) |
| Часовой пояс GMT +3, время: 08:07. |