Скрипт подсчета коммунальных услуг
Доброго времени суток! Пишу диплом и столкнулся с задачей которую не могу решить, точнее не знаю каким методом решить ее, сам изучаю 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();
Возможно есть ошибки, не проверял... Гранит науки должен грызться с трудом и потом )) |
Цитата:
Цитата:
var form = document.querySelector('#form'),
calc = {
price: {
svet: "0.32300",
svetno: "63",
gazyes: "1.7880",
gazno: "43.13",
hotyes: "27.76",
hotno: "15.81",
coldyes: "31.00",
coldno: "38.25",
otop: "84.67",
musor: "26.00"
},
load:
function () {
var str = localStorage['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['calc_price'] = JSON.stringify(this.price);
return this;
}
};
form.addEventListener('change', function(){
for(var key in calc.price){
calc.price[key] = this[key];
}
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);
calc.load().set();
Связь с "электричеством": <input id="sS" style="width: 120px; " type="text" onfocus="changeFlag(0);" onkeyup="CalcSum(1);" onkeypress="return calc_price"></td> </tr> Цитата:
|
dark_mc, а вы сами весь код калькулятора писали?
|
dark_mc,
Я не зря указал, что форма должна быть формой, вот и первый урок. Нужно пользоваться BOM-ом полностью, это снизит количество ошибок и размер лишнего кода. ...кратко, инпуты должны быть внутри формы |
Цитата:
Цитата:
У меня две формы: 1 - Там где пользователь сможет сам менять значения(ваш код). 2 - Форма калькулятора,там где идет сам подсчет. Поместил я калькулятор в форму и ничего не происходит,нет подсчета, ничего не изменяет. |
dark_mc,
т.е. вы имели ввиду, форму ввода данных пользователем, и графическое оформление результата расчета, верно? |
kichSman,
Да, именно это) |
Поддержу Rise в вопросе. Вы действительно хотите написать код, или просто скопипастить?
|
Цитата:
|
Хорошо господа, я рад что вы мне помогали, сейчас буду писать все с нуля...
Думаю переписать сам код калькулятора, а тот код с заменой оставить, там в принципе все мне понятно. |
Вот сделал форму, написал инпуты для ввода значений пользователем(тарифы), инпуты для расчета, ну и итог.
Сделал связь, прошелся по коду, должно работать. Подскажите что поменять, что исправить. Почему оно не считает?
<form name="test">
Тарифы:
<br>
<input id="S1" value="0.32300" type="text" onkeyup="Sum" onkeypress="return isNumberKey(event)">
<input id="S2" value="63" type="text" onkeyup="Sum" onkeypress="return isNumberKey(event)">
<br>
Расчет:
<br>
<input id="sS" type="text" onkeyup="Sum" onkeypress="return isNumberKey(event)">
<input id="sE" type="text" onkeyup="Sum" onkeypress="return isNumberKey(event)">
<br>
Итог:
<br>
<input id="sum" readonly="readonly" type="text" onkeyup="Sum">
</form>
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 43 || charCode > 57))
return false;
return true;
}
</script>
<script>
function Sum() {
if () {
document.getElementById('sS').value = sE * S1.toFixed(2);
}
else if () {
document.getElementById('sS').value = sE * S1.toFixed(2);
}
else if ()
{
var sS = document.getElementById('sS').value;
if () {
document.getElementById('sE').value = sS / S1.toFixed(2);
}
else if () {
document.getElementById('sE').value = sS / S2.toFixed(2);
}
}
var s = 0;
var sum = 0;
if (document.getElementById('sS').value != null) {
s = document.getElementById('sS').value;
}
sum = parseFloat(Number(s));
document.getElementById('sum').value = parseFloat(sum).toFixed(2);
}
</script>
|
dark_mc,
а почему в if-ах нету условий?) |
Вот, перепробовал все связи, ставил условие, не пашет и все, что я не правильно делаю в if? помогите пожалуйста.
<form name="test">
Тарифы:
<br>
<input id="S1" value="0.32300" type="text" onkeyup="Summ" onkeypress="return isNumberKey(event)">
<input id="S2" value="63" type="text" onkeyup="Summ" onkeypress="return isNumberKey(event)">
<br>
Расчет:
<br>
<input id="sS" type="text" onkeyup="Summ" onkeypress="return isNumberKey(event)">
<input id="sE" type="text" onkeyup="Summ" onkeypress="return isNumberKey(event)">
<br>
Итог:
<br>
<input id="sum" readonly="readonly" type="text" onkeyup="Summ" onkeypress="return isNumberKey(event)">
</form>
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 43 || charCode > 57))
return false;
return true;
}
</script>
<script>
function Summ(index) {
if (test) {
document.getElementById('sS').value = sE * S1.toFixed(2);
}
else if (test) {
document.getElementById('sS').value = sE * S1.toFixed(2);
}
else if (index)
{
var sS = document.getElementById('sS').value;
if (test) {
document.getElementById('sE').value = sS / S1.toFixed(2);
}
else if (test) {
document.getElementById('sE').value = sS / S2.toFixed(2);
}
}
var s = 0;
var sum = 0;
if (document.getElementById('sS').value != null)
{
s = document.getElementById('sS').value;
}
sum = parseFloat(Number(s));
document.getElementById('sum').value = parseFloat(sum).toFixed(2);
}
</script>
П.С. Я знаю что в иф не надо (test) писать. |
dark_mc,
<form oninput="calc(this)">
<fieldset>
<legend>Электричество</legend>
<label>Тариф, руб./кВт*ч: <input type="text" name="svetTarif" value="0"></label>
<label>Расход, кВт*ч: <input type="text" name="svetRashod" value="0"></label>
<label>Расчет, руб.: <input type="text" name="svetRaschet" value="0" readonly></label>
</fieldset>
<fieldset>
<legend>Отопление</legend>
<label>Тариф, руб./м2: <input type="text" name="teploTarif" value="0"></label>
<label>Площадь, м2: <input type="text" name="teploPloshad" value="0"></label>
<label>Расчет, руб.: <input type="text" name="teploRaschet" value="0" readonly></label>
</fieldset>
<fieldset>
<legend>Итого</legend>
<input type="text" name="Itogo" value="0" readonly> руб.
</fieldset>
</form>
<script>
function calc(form) {
form.svetRaschet.value = (form.svetTarif.value * form.svetRashod.value).toFixed(2);
form.teploRaschet.value = (form.teploTarif.value * form.teploPloshad.value).toFixed(2);
form.Itogo.value = (+form.svetRaschet.value + +form.teploRaschet.value).toFixed(2);
}
</script>
|
Rise, весьма Вам благодарен. Даже как то не по себе, что код на столько мал и я не смог его решить вот таким способом. Буду учиться.
|
| Часовой пояс GMT +3, время: 18:09. |