Сегодня был очень скучный день и шарясь в инете я наткнулся на статью, где парень делал простой калькулятор.
Меня это почему-то заинтересовало и я решил сделать свой собственный калькулятор.
Калькулятор работает, причём работает без ошибок.
Демо Вы можете глянуть тут: Калькулятор (демо)
Это HTML часть
Код
<form name="calculator" class="calculator" align="center">
<input type="textfield" name="ans" value="" class="calc_windows" readonly>
<br><br>
<input class="calc_botton calc_1" type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input class="calc_botton calc_1" type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input class="calc_botton calc_1" type="button" value="(" onClick="document.calculator.ans.value+='('">
<input class="calc_botton calc_1" type="button" value=")" onClick="document.calculator.ans.value+=')'">
<br>
<input class="calc_botton" type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input class="calc_botton" type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input class="calc_botton" type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input class="calc_botton calc_2" type="button" value="-" onClick="document.calculator.ans.value+='-'">
<br>
<input class="calc_botton" type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input class="calc_botton" type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input class="calc_botton" type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input class="calc_botton calc_2" type="button" value="+" onClick="document.calculator.ans.value+='+'">
<br>
<input class="calc_botton" type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input class="calc_botton" type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input class="calc_botton" type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input class="calc_botton calc_3" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>
<input class="calc_botton" type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input class="calc_botton" type="button" value="00" onClick="document.calculator.ans.value+='00'">
<input class="calc_botton" type="button" value="." onClick="document.calculator.ans.value+='.'">
<input class="calc_botton calc_del" type="reset" value="del">
</form>
Это CSS часть
Код
.calculator {background: #CCC !important; border-radius: 15px !important; display: inline-block !important; padding: 20px !important;}
.calc_windows {background: #878787 !important; border: 2px inset #878787 !important; font-size: 55px !important; padding: 5px !important; width: 240px !important; height: 55px !important; font-family: calc;}
.calc_botton {margin: 2px !important; background: #878787 !important; border-radius: 12px !important; width: 55px; height: 55px; font-size: 25px; border: 2px outset #878787 !important;}
.calc_del {background: #E93E30 !important; border: 2px outset #E93E30 !important;}
.calc_1 {background: #377EF0 !important; height: 25px; border-radius: 6px !important; font-size: 15px; border: 2px outset #377EF0 !important;}
.calc_2 {background: #377EF0 !important; border: 2px outset #377EF0 !important;}
.calc_3 {background: #377EF0 !important; border: 2px outset #377EF0 !important;}
.calc_botton:active {box-shadow: inset 0px 0px 3px 0px #000;}