Калькулятор

  • Автор темы west
  • Дата начала
W

west

#1
<mce:script type="text/javascript"><!--
function calculate()
{
var size_a = document.getElementById('size_a').value;
var size_b = document.getElementById('size_b').value;
var size_c = document.getElementById('size_c').value;
var type = document.getElementById('type').value;
var hot = document.getElementById('hot').value;
var sum = document.getElementById('sum');

var result;
if(size_a * size_b < 5)
{
result = size_a * size_b * type + size_a * size_b * type / 10 + size_c * 11900 + hot * size_a + size_b * hot;
}
else
{
if(size_a * size_b < 10)
result = size_a * size_b * type + size_a * size_b * type / 20 + size_c * 11900 + hot * size_a + size_b * hot;
else
{
if(size_a * size_b < 15)
result = size_a * size_b * type + size_c * 11900 + hot * size_a + size_b * hot;
else
{
if(size_a * size_b < 25)
result = size_a * size_b * type - size_a * size_b * type / 20 + size_c * 11900 + hot * size_a + size_b * hot;
else
{
if(size_a * size_b < 50)
result = size_a * size_b * type - size_a * size_b * type / 10 + size_c * 11900 + hot * size_a + size_b * hot;
else
result = size_a * size_b * type - size_a * size_b * type * 15 / 100 + size_c * 11900 + hot * size_a + size_b * hot;
}
}
}
}
sum.value = result.toFixed(0);
}
// --></mce:script>

<table border="0" width="67%">
<tbody>
<tr>
<td width="30%" rowspan="3"><img src="images/bal_main2.jpg" width="350" height="242" /> </td>
<td>
<div align="center">
<select id="type">
<option disabled="true">Выберите адреc из списка:</option>
<option value="6851">Загребский бульвар 9</option>
<option value="6851">Приморский пр 137</option>
<option value="6851">Яхтенная, д.1</option>
<option value="6851">Яхтенная, д.3</option>
<option value="6851">Шуваловский пр, 41</option>
<option value="6851">Комендантский пр, д.53</option>
<option value="6851">Комендантский пр, д.51</option>
<option value="6851">Просвещения пр, 99</option>
<option value="6851">Малая Каштановая ул., д.9</option>
<option value="6435">Ушинского, д.2</option>
<option value="5118">Гражданский пр</option>
<option value="5824">Энгельса, 93</option>
<option value="6851">М. Жукова ул, д.48</option>
<option value="5118">Беринга ул., д.23</option>
<option value="5118">Беринга ул., д.25</option>
<option value="5118">Беринга ул., д.27</option>
<option value="5118">Есенина ул.,д.1</option>
<option value="5118">Учительская ул.</option>
<option value="5118">Кондратьевский</option>
<option value="5118">Коломяжский, д.15</option>
<option value="6294">Финляндский, д.4</option>
<option value="5118">Бутлерова, д.40</option>
<option value="5118">Брянцева</option>
<option value="5118">Луначарского, 104</option>
<option value="5118">Петергофское шоссе, 17</option>
<option value="5118">Космонавтов, д.61</option>
<option value="5824">Варшавская, д.19</option>
<option value="5824">Варшавская, д.23</option>
<option value="10000">Ленинский, д.114</option>
<option value="7118">Парашютная</option>
<option value="5118">Славы, 52</option>
<option value="7000">Королева</option>
<option value="6294">Выборгское шоссе</option>
<option value="6294">Космонавтов, д.37</option>
<option value="5118">Ленинский, д.100</option>
<option value="6294">Варшавская, д.61</option>
<option value="6529">Краснопутиловская, д.125</option>
<option value="6059">Дунайский пр</option>
<option value="7000">Ярославский 95</option>
<option value="7000">Трефолева, д.9</option>
<option value="7000">Кемская, д.7</option>
<option value="7000">Морской, д.10</option>
<option value="7000">Вязовая</option>
</select>
</div>
</td>
</tr>
<tr>
<td><br />
<div align="center"><select id="hot">
<option value="0">без утепления примыканий</option>
<option value="2000">с утеплением примыканий</option>
</select></div>
<div align="center">Размер "а" <br />
<input name="Размер а" class="td" id="size_a" />
</div>
<div align="center">Размер "b" <br />
<input name="Размер b" class="td" id="size_b" />
</div>
<div align="center">Кол - во окон <br />
<input name="Размер c" class="td" id="size_c" />
</div>
</td>
</tr>
<tr>
<td>
<div align="center">Общая сумма:
<input name="Сумма" id="sum" />
</div>
<div align="center"> <button class="but" onclick="calculate();"></button></div>

Я начинаю вписывать значение а он мне не выдаёт общую сумму, что делать?
 
B

Bugnet

#2
Проверил Ваш код на обычной html- странице. Убрал, то что выделено жирно и что-то стало выдавать, но поленился посчитать сам верен ли результат
<mce:script type="text/javascript">
.
.
.
</mce:script>
 
S
#3
Решил написать калькулятор, все нормально счиатет, потом пошел дальше, нашел код проверки вводимых чисел на JS, проверка на пустое поле и вводимые символы, получилось 2 функции, одна сама форма расчета и 2-я функция, проверки, я новичок в JS, подскажите как при нажатиии на кнопку чтоб выполнялась функция проверки и при удачном завершении, выполнялась функция расчета, заранее спасибо.
http://2007.fastcoder.ru/articles/?aid=173 вот код проверки, что то он у меня правда не хочет работать:(
 
B

Bugnet

#4
Есть такая штука - jQuery. Изучить можно за пару дней, а возможности огромные. Вот здесь всего на четырёх страничках материал ....и будете сами писать скрипты проверки. Гораздо проще чем Java Script. Давайте сюда код формы и посмотрим, что можно сделать.
 
S
#5
Код:
<HTML>
<HEAD>
<Center><h1>Тест ява скрипт калькулятор</h1>
<script LANGUAGE="JavaScript">

function writeText (form) 
{
var S=form.x.value;
var L=form.y.value;
var Trub=form.a.value;
var Tochec=form.b.value;
var Ugol=form.c.value;
form.stoimost.value= (S*L*450)+(2*L+2*S)*50+(Trub*300)+(Tochec*200)+(Ugol-4)*100;
}
//проверка вводимых символов
function checkForm(form) 
{ 
// Заранее объявим необходимые переменные 
var el, // Сам элемент 
elName, // Имя элемента формы 
value, // Значение 
type; // Атрибут type для input-ов 
// Массив списка ошибок, по дефолту пустой 
var errorList = []; 
// Хэш с текстом ошибок (ключ - ID ошибки) 
var errorText = { 
1 : "Не заполнено поле 'Ширина потолка'", 
2 : "Не заполнено поле 'Длина потолка'", 
3 : "Не заполнено поле 'Количество труб'", 
4 : "Не заполнено поле 'Количество точек освещения'", 
5 : "Не заполнено поле 'Количество углов'", 
6 : "Не цифры поле 'Ширина потолка'", 
7 : "Не цифры поле 'Длина потолка'", 
8 : "Не цифры поле 'Количество труб'", 
9 : "Не цифры поле 'Количество точек освещения'", 
10 : "Не цифры поле 'Количество углов'", 

} 
// Получаем семейство всех элементов формы 
// Проходимся по ним в цикле 
for (var i = 0; i < form.elements.length; i++) { 
el = form.elements[i]; 
elName = el.nodeName.toLowerCase(); 
value = el.value; 
if (elName == "input") { // INPUT 
// Определяем тип input-а 
type = el.type.toLowerCase(); 
// Разбираем все инпуты по типам и обрабатываем содержимое 
switch (type) { 
case "text" : 
if (el.name == "x" && value == "") errorList.push(1); 
if (el.name == "y" && value == "") errorList.push(2);
if (el.name == "a" && value == "") errorList.push(3);
if (el.name == "b" && value == "") errorList.push(4);
if (el.name == "c" && value == "") errorList.push(5); 
break; 
//---------------ДОБАВИТЬ ПРОВЕРКУ РЕГУЛЯРОК-----------------------//
default : 
// Сюда попадают input-ы, которые не требуют обработки 
// type = hidden, submit, button, image 
break; 
}
else { 
// Обнаружен неизвестный элемент;) 
} 
} //--------------------------ПОДРЕДАКТИРОВАТЬ МБ КИНУТЬ ФУНКЦИЮ ОБРАБОКИ-ПОДСЧЕТА-------------//
// Финальная стадия 
// Если массив ошибок пуст - возвращаем true 
if (!errorList.length) return true; 
// Если есть ошибки - формируем сообщение, выовдим alert 
// и возвращаем false 
var errorMsg = "При заполнении формы допущены следующие ошибки:\n\n"; 
for (i = 0; i < errorList.length; i++) { 
errorMsg += errorText[errorList[i]] + "\n"; 
} 
alert(errorMsg); 
return false; 
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM NAME="myform">
Ширина потолка: <input type="text" name="x" value="">м<br/> 
Длина потолка: <input type="text" name="y" value="">м<br/> 
Количество труб: <input type="text" name="a" value="">шт.<br/>
Количество точек освещения: <input type="text" name="b" value="">шт.<br/>
Количество углов: <input type="text" name="c" value="">шт.<br/>	
Стоимость потолка под ключь <input type="text" name="stoimost" value="">грн.<br/>
<INPUT TYPE="button" NAME="button" VALUE="Расчитать" 
onClick="checkForm(form)">
</CENTER>
<BODY>
</HTML>
Сам вчера нашело из-за этой мелочи JS уроки на ютубе, начал учить)
 
S
#7
Спасибо, но это не решает задачи с проверкой, у меня работает калькулятор, с помощью одной функции на 6 строк, мне б проверочку нормально сделать, чтоб при вводе букв в поле он выводил сообщениен об этом и если поле не заполнено какое то тоже сообщал об этом
 
B

Bugnet

#8
Форма должна быть удобна для пользователя. А так - "всплывает " "несимпатичное" окно alert, которое надо читать, потом закрывать (это время). А если опять ошибка - опять всплывает окно и снова затеняет форму. Закрыл окно JS для правки формы и забыл, что там было написано. Это уже не актуально. Давно не встречал сайты где бы использовалось стандартное окно JS.
Подсветка полей гораздо более эстетично выглядит. Ну а хотите чтобы ещё и сообщения были - какие проблемы можно и сообщения на этой странице.
Впрочем, хозяин - барин.