Матрацный калькулятор на javascript
Пишем простой калькулятор на javascript.
Javascript:
function calculator(form) {
s = eval(form.matras.value); // Берем значение из select list
a = eval(form.width.value); // Берем значение ширины
b = eval(form.height.value); // Берем значение длины
c = (a * b)*(s/10000); // Наша формула расчёта
form.total.value = c; // Выводим результат
}
s = eval(form.matras.value); // Берем значение из select list
a = eval(form.width.value); // Берем значение ширины
b = eval(form.height.value); // Берем значение длины
c = (a * b)*(s/10000); // Наша формула расчёта
form.total.value = c; // Выводим результат
}
HTML разметка:
<form>
<table width="215" border="0" align="center" cellpadding="5">
<tr>
<td class="label" width="60">
<label>Модель: </label>
</td>
<td width="155">
<select size="1" name="matras" id="matras">
<option selected="selected" value="0"> </option>
<option value="9800">Estrella-1</option>
<option value="13300">Estrella-2</option>
<option value="17200">Estrella-3</option>
<option value="21000">Estrella-4</option>
<option value="14100">Bianco-1</option>
<option value="18500">Bianco-2</option>
<option value="22300">Bianco-3</option>
<option value="26200">Bianco-4</option>
<option value="23800">Bianco Multi-1</option>
<option value="28100">Bianco Multi-2</option>
<option value="32000">Bianco Multi-3</option>
<option value="35800">Bianco Multi-4</option>
<option value="13300">Baby Line-1</option>
<option value="17700">Baby Line-2</option>
<option value="21600">Baby Line-3</option>
<option value="25400">Baby Line-4</option>
<option value="9200">Baby Line Hollcon 6</option>
<option value="11400">Baby Line Hollcon Coco 6</option>
<option value="9900">Baby Line Hollcon 10</option>
<option value="12100">Baby Line Hollcon Coco 10</option>
<option value="11900">Baby Line 6</option>
<option value="15100">Hollcon 20</option>
<option value="14200">Espuma normal-1</option>
<option value="22100">Espuma normal-2</option>
<option value="21600">Espuma normal-3</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label>Ширина(см): </label>
</td>
<td>
<input type="text" name="width" id="width" size="20" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;" />
</td>
</tr>
<tr>
<td class="label">
<label>Длина(см): </label>
</td>
<td>
<input type="text" name="height" id="height" size="20" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;" />
</td>
</tr>
<tr>
<td class="label">
<label>Итого: </label>
</td>
<td>
<input type="text" name="total" id="total" readonly="readonly" size="20">
</td>
</tr>
</table>
<div class="btns">
<input type="button" id="button" name="button" value="Расчитать" onclick="calculator(this.form)" />
<input type="reset" id="reset" value="Сбросить" name="reset" />
<div class="clearfix"></div>
</div>
</form>
<table width="215" border="0" align="center" cellpadding="5">
<tr>
<td class="label" width="60">
<label>Модель: </label>
</td>
<td width="155">
<select size="1" name="matras" id="matras">
<option selected="selected" value="0"> </option>
<option value="9800">Estrella-1</option>
<option value="13300">Estrella-2</option>
<option value="17200">Estrella-3</option>
<option value="21000">Estrella-4</option>
<option value="14100">Bianco-1</option>
<option value="18500">Bianco-2</option>
<option value="22300">Bianco-3</option>
<option value="26200">Bianco-4</option>
<option value="23800">Bianco Multi-1</option>
<option value="28100">Bianco Multi-2</option>
<option value="32000">Bianco Multi-3</option>
<option value="35800">Bianco Multi-4</option>
<option value="13300">Baby Line-1</option>
<option value="17700">Baby Line-2</option>
<option value="21600">Baby Line-3</option>
<option value="25400">Baby Line-4</option>
<option value="9200">Baby Line Hollcon 6</option>
<option value="11400">Baby Line Hollcon Coco 6</option>
<option value="9900">Baby Line Hollcon 10</option>
<option value="12100">Baby Line Hollcon Coco 10</option>
<option value="11900">Baby Line 6</option>
<option value="15100">Hollcon 20</option>
<option value="14200">Espuma normal-1</option>
<option value="22100">Espuma normal-2</option>
<option value="21600">Espuma normal-3</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label>Ширина(см): </label>
</td>
<td>
<input type="text" name="width" id="width" size="20" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;" />
</td>
</tr>
<tr>
<td class="label">
<label>Длина(см): </label>
</td>
<td>
<input type="text" name="height" id="height" size="20" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;" />
</td>
</tr>
<tr>
<td class="label">
<label>Итого: </label>
</td>
<td>
<input type="text" name="total" id="total" readonly="readonly" size="20">
</td>
</tr>
</table>
<div class="btns">
<input type="button" id="button" name="button" value="Расчитать" onclick="calculator(this.form)" />
<input type="reset" id="reset" value="Сбросить" name="reset" />
<div class="clearfix"></div>
</div>
</form>
CSS стили:
/* calculator */
#block-block-1 tbody {
border-top:0;
}
#block-block-1 tr {
padding:10px 0;
}
#matras {
font-size:12px;
}
td.label {
background:#fff;
padding:5px 0;
font-size:9px;
}
input#width,
input#height,
input#total {
float:right;
}
input#button {
position:absolute;
left:55px;
bottom:0;
}
input#reset {
position:absolute;
right:0;
bottom:0px;
}
.btns {
height:25px;
position:relative;
margin-top:5px;
}
#block-block-1 tbody {
border-top:0;
}
#block-block-1 tr {
padding:10px 0;
}
#matras {
font-size:12px;
}
td.label {
background:#fff;
padding:5px 0;
font-size:9px;
}
input#width,
input#height,
input#total {
float:right;
}
input#button {
position:absolute;
left:55px;
bottom:0;
}
input#reset {
position:absolute;
right:0;
bottom:0px;
}
.btns {
height:25px;
position:relative;
margin-top:5px;
}
Если есть вопросы - задавайте. В конце документа прикреплен HTML файл с готовым калькулятором.
| Attachment | Size |
|---|---|
| calc.html | 3.69 KB |
- Categories:
- heihachi's blog
- Add new comment
- 1292 reads

Comments
respond
You are manifestly, a professional of thesis research referring to this topic accomplishing but if you want to choose the dissertation writing, I would suggest you to find a perfect item.