как установить калькулятор HTML в блоге

Доброго времени суток, друзья. В сети достаточно много сайтов, которые предлагают создать калькуляторы всяких форм, расчетов стоимости и прочего. Одним из самых удобных, на мой взгляд, это сервис uCalc. Работать с ним достаточно просто, не требуется навыков программирования. Все действия по настройке интерфейса выполняются в визуальном редакторе. Есть бесплатный тариф и многое другое.

Но я сегодня не делаю обзор этого сервиса. А предложу вам простой, рабочий и вполне компактный html калькулятор. Тоже навыков особо не нужно. Вставляем готовый код в нужное место и всё. Собственно, можете посмотреть и попробовать его в работе прямо здесь

Вроде, как и не нужная особо вещь. А вдруг пригодится...Когда и блог открыт и калькулятор под рукой.

Копируйте код

<style type="text/css">
        #calculator * {font-size: 16px;}
        #calculator table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; }
        #calculator table td {border-spacing: 3px;}
        input.display {width: 166px; text-align: right;}
        td.buttons {border-top: solid 1px silver;}  
        input[type= button] {width: 40px; height: 30px;}
    </style>

<form id="calculator" name="calc">
<table>
        <tbody>
<tr>
        <td><input class="display" name="input" size="16" type="text" />
        </td>
        </tr>
<tr>
        <td class="buttons"><input name="one" onclick="calc.input.value += '1'" type="button" value="1" />
            <input name="two" onclick="calc.input.value += '2'" type="button" value="2" />
            <input name="three" onclick="calc.input.value += '3'" type="button" value="3" />
            <input name="add" onclick="calc.input.value += '+'" type="button" value="+" />
            <br />
<input name="four" onclick="calc.input.value += '4'" type="button" value="4" />
            <input name="five" onclick="calc.input.value += '5'" type="button" value="5" />
            <input name="six" onclick="calc.input.value += '6'" type="button" value="6" />
            <input name="sub" onclick="calc.input.value += '-'" type="button" value="-" />
            <br />
<input name="seven" onclick="calc.input.value += '7'" type="button" value="7" />
            <input name="eight" onclick="calc.input.value += '8'" type="button" value="8" />
            <input name="nine" onclick="calc.input.value += '9'" type="button" value="9" />
            <input name="mul" onclick="calc.input.value += '*'" type="button" value="x" />
            <br />
<input name="clear" onclick="calc.input.value = ''" type="button" value="c" />
            <input name="zero" onclick="calc.input.value += '0'" type="button" value="0" />
            <input name="doit" onclick="calc.input.value = eval(calc.input.value)" type="button" value="=" />
            <input name="div" onclick="calc.input.value += '/'" type="button" value="/" />
        </td>
        </tr>
</tbody></table>
</form>

Код вставляйте или в сообщение в режиме HTML, или в сайдбар блога в гаджет HTML/JavaScript. Можно поиграться со стилями и внешним видом в первом коде CSS.

Всем добра и здоровья. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email