Пытаюсь вставить калькулятор на страницу.Код и скрипт работают отлично, но ширины моей страницы не хватает для отображения таблицы, в коде пропадает тег style.Видимо его нужно где-то отдельно прописать?Если да, то где?
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>calc</title>
</head>
<body>
<style>
.calc {
font-family: 'verdana', sans-serif;
font-size: 12px;
font=Verdana width: 600px;
margin: 0 auto;
}
.calc .schema {
margin: 1em 0;
text-align: center;
}
.calc h4 {
text-align: center;
}
.calc table {
font: inherit;
width: 100%;
margin: 1em 0;
}
.calc td {
text-align: center;
vertical-align: top;
}
.calc table.in tr:first-child {
font-weight: bold;
}
.calc table.in input {
width: 60px;
}
.calc table.out tr:first-child {
font-weight: bold;
}
.calc table.out input {
width: 60px;
}
.calc table.out td.summary {
text-align: right;
}
.calc table.out td.summary input {
width: 120px;
}
.calc .panel {
text-align: right;
}
</style>
<script type="text/javascript">
(function () {
function event(element, event, func) {
element.attachEvent ? element.attachEvent('on' + event, func) : element.addEventListener(event, func, false);
}
function controls(name) {
return document.getElementsByName(name);
}
function control(name) {
return document.getElementsByName(name)[0];
}
function parse_percent(text) {
var parts = text.split('%');
var first = parts[0].replace(',', '.');
var value = parseFloat(first) / 100;
return isNaN(value)? 0 : value;
}
function parse_float(text) {
text = text.replace(' ', '').replace(',', '.');
var value = parseFloat(text);
return isNaN(value)? 0 : value;
}
function format_percent(value, fractional) {
return (value * 100).toFixed(fractional).replace('.', ',') + '%';
}
function format_float(value, fractional) {
var text = value.toFixed(fractional);
var parts = text.split('.');
var thousands = parts[0].replace(/(?=(?:\d{3})+$)(?!^)/g, ' ');
return parts.length == 1 ? thousands : thousands + ',' + parts[1];
}
function recalculate(force) {
var recalculate = force || control('auto-recalculation').checked;
if (!recalculate) {
return;
}
var length = parse_float(control('length').value);
var width = parse_float(control('width').value);
var height = parse_float(control('height').value);
var glazing = parse_float(control('glazing').value);
var grouting = parse_float(control('grouting').value);
var cost = parse_float(control('cost').value);
var discount = parse_percent(control('discount').value);
var pallet = 240 /*bricks*/;
var bricks = [
(0.24 * height * ((length + width) - 0.24) - 0.12 * glazing) / (0.00195 + 0.000054 * grouting),
(0.5 * height * ((length + width) - 0.5) - 0.24 * glazing) / (0.00195 + 0.000054 * grouting),
(0.75 * height * ((length + width) - 0.75) - 0.375 * glazing) / (0.00195 + 0.000054 * grouting)
];
for (var index = 0; index < 3; ++index) {
bricks[index] = Math.max(0, bricks[index]);
var sum = bricks[index] * cost;
var summary = (1 - discount) * sum;
controls('bricks')[index].value = format_float(bricks[index], 0);
controls('pallets')[index].value = format_float(bricks[index] / pallet, 0);
controls('sum')[index].value = format_float(sum, 2);
controls('summary')[index].value = format_float(summary, 2);
}
}
event(window, 'load', function () {
event(control('recalculate'), 'click', function () {
recalculate(true);
});
var inputs = ['length', 'width', 'height', 'glazing', 'grouting', 'cost'];
for (var index = 0; index < inputs.length; ++index) {
event(control(inputs[index]), 'blur', function (event) {
var control = event.srcElement;
control.value = format_float(parse_float(control.value), 2);
recalculate(false);
});
}
event(control('discount'), 'blur', function (event) {
var control = event.srcElement;
var value = Math.max(0, Math.min(1, parse_percent(control.value)));
control.value = format_percent(value, 0);
recalculate(false);
});
});
})();
</script>
<div class="calc">
<div class="schema">
<img src="schema.jpg" alt="schema">
</div>
<table class="in">
<tr>
<td>Ширина,<br>м</td>
<td>Длина,<br>м</td>
<td>Высота,<br>м</td>
<td>Расшивка,<br>мм</td>
<td>Остекление,<br>%</td>
<td>Стоимость<br>кирпича</td>
<td>Скидка,<br>%</td>
</tr>
<tr>
<td><input name="width" type="text" value="0,00"></td>
<td><input name="length" type="text" value="0,00"></td>
<td><input name="height" type="text" value="0,00"></td>
<td><input name="grouting" type="text" value="0,00"></td>
<td><input name="glazing" type="text" value="0,00"></td>
<td><input name="cost" type="text" value="0,00"></td>
<td><input name="discount" type="text" value="0%"></td>
</tr>
</table>
<h4>Кирпич 250x120x65</h4>
<table class="out">
<tr>
<td>Толщина стены</td>
<td>Количество<br>кирпичей</td>
<td>Количество<br>палет</td>
<td>Сумма</td>
<td>Итог</td>
</tr>
<tr>
<td>пол-кирпича</td>
<td><input name="bricks" type="text" value="" readonly="readonly"></td>
<td><input name="pallets" type="text" value="" readonly="readonly"></td>
<td><input name="sum" type="text" value="" readonly="readonly"></td>
<td class="summary"><input name="summary" value="" readonly="readonly"></td>
</tr>
<tr>
<td>1 кирпич</td>
<td><input name="bricks" type="text" value="" readonly="readonly"></td>
<td><input name="pallets" type="text" value="" readonly="readonly"></td>
<td><input name="sum" type="text" value="" readonly="readonly"></td>
<td class="summary"><input name="summary" value="" readonly="readonly"></td>
</tr>
<tr>
<td>1,5 кирпича</td>
<td><input name="bricks" type="text" value="" readonly="readonly"></td>
<td><input name="pallets" type="text" value="" readonly="readonly"></td>
<td><input name="sum" type="text" value="" readonly="readonly"></td>
<td class="summary"><input name="summary" value="" readonly="readonly"></td>
</tr>
</table>
<div class="panel">
<input class="true" type="checkbox" checked="checked" name="auto-recalculation" title="делать пересчёт автоматически при изменении данных">автоматически
<input type="button" value="Расчет" name="recalculate">
</div>
</div>
</body>
15.02.2017, 22:42:41