Использование JavaScript простой и очевидный вариант при реализации простых калькуляторов, призванных заменить публикацию на сайте больших таблиц и для добавления некоторой интерактивности.
Рассмотрим простой калькулятор на чистом JavaScript (без использования библиотек типа jQuery и пр.) использующий функции уникализации и сортировки данных в массиве .
Калькулятором будем считать стоимость квартир основываясь на стоимости квадратного метра и площади соответственно. При этом данные (значения тегов <option> ) в выпадающих списках (теги <select> ) будут заполняться автоматически и в зависимости от остальных.
HTML-код калькулятора
<script type="text/javascript" language="javascript" src="calc.js"></script>
<form name="form">
<table>
<tbody>
<tr>
<td style="padding-right:10px;">Комнаты</td>
<td>
<select name="room" id="room" onchange="calc(this.value);" style="width:150">
<option value="0" selected="selected">Выбрать...</option>
<option value="1">1 комната</option>
<option value="2">2 комнаты</option>
</select>
</td>
</tr>
<tr>
<td style="padding-right:10px;">Этаж</td>
<td>
<select name="floor" id="floor" onchange="calc('floor');" style="width:150">
<option value="0" selected="selected">Выбрать...</option>
</select>
</td>
</tr>
<tr>
<td style="padding-right:10px;">Площадь</td>
<td>
<select name="area" id="area" onchange="calc('area');" style="width:150">
<option value="0" selected="selected">Выбрать...</option>
</select>
</td>
</tr>
<tr>
<td style="padding-right:10px;">Сумма</td>
<td>
<input value="0" name="summ" readonly="readonly" style="border: medium none; background: none repeat scroll 0% 0% transparent; width: 200px;" maxlength="10" type="text">
</td>
</tr>
</tbody>
</table>
</form>
JavaScript-код калькулятора
function sortNumber( a, b) // функция для сортировки одномерного массива
{
return a - b;
}
function sortArray( a, b) { // функция для сортировки многомерного массива по первому индексу
if ( a[ 0 ] < b[ 0 ] ) return - 1 ;
if ( a[ 0 ] > b[ 0 ] ) return 1 ;
return 0 ;
}
function unique( a) // функция уникализации значений массива
{
var r = new Array( ) ;
o: for ( var i = 0 , n = a.length ; i < n; i++ )
{
for ( var x = 0 , y = r.length ; x < y; x++ )
{
if ( r[ x] == a[ i] ) continue o;
}
r[ r.length ] = a[ i] ;
}
return r;
}
// произвольные данные [площадь, этаж, цена]
var room0 = [ [ 0 , 0 , 0 ] ] ;
var room1 = [ [ 40 , 1 , 20 ] , [ 50 , 3 , 25 ] , [ 53 , 3 , 30 ] ] ;
var room2 = [ [ 70 , 1 , 40 ] , [ 72 , 1 , 35 ] , [ 73 , 5 , 38 ] ] ;
function calc( par) {
// квартиры
if ( par == 0 ) { roomx = room0 } ;
if ( par == 1 ) { roomx = room1 } ;
if ( par == 2 ) { roomx = room2 } ;
var floorarray = new Array( ) ;
for ( i = 0 ; i < roomx.length ; i++ ) {
floorarray[ i] = roomx[ i] [ 1 ] ;
}
var uniquefloor = new Array( ) ;
uniquefloor = unique( floorarray) ;
uniquefloor = uniquefloor.sort ( sortNumber) ;
// этажи
var objFloor = document.getElementById ( "floor" ) ;
if ( par != 'floor' && par != 'area' ) {
objFloor.length = 0 ;
for ( i = 0 ; i < uniquefloor.length ; i++ ) {
objFloor.options [ objFloor.options .length ] = new Option( uniquefloor[ i] + ' этаж' , uniquefloor[ i] ) ;
}
}
var areaarray = new Array( ) ;
areaarray = roomx;
areaarray = areaarray.sort ( sortArray) ;
var floorvalue = objFloor.options [ objFloor.selectedIndex ] .value ;
var objArea = document.getElementById ( "area" ) ;
// площади
if ( par != 'area' ) {
objArea.length = 0 ;
for ( k = 0 ; k < roomx.length ; k++ ) {
if ( roomx[ k] [ 1 ] == floorvalue) {
objArea.options [ objArea.options .length ] = new Option( areaarray[ k] [ 0 ] , areaarray[ k] [ 2 ] ) ;
}
}
}
// сумма
area = objArea.options [ objArea.selectedIndex ] .text ;
price = objArea.options [ objArea.selectedIndex ] .value ;
summ = Number( price) * Number( area) ;
document.form .summ .value = summ;
return false ;
}
Пример работы нашего простого JavaScript калькулятора:
Некоторые полезные ссылки по функциям JavaScript, использованным в примере:
Калькулятор создан для примера на коленке, поэтому если встретите нелогизмы или ошибки прошу прокомментировать — внесу исправления . Если есть вопросы — тоже задавайте.