Простой офисный калькулятор на Javascript

Простой и маленький офисный калькулятор на Javascript, слеплен сейчас от скуки и в процессе ожидания решения одного вопроса :)

Калькуляторов существуют тысячи, но этот отличается вот чем от современных тенденций:

• сознательно не использовано JQuery и подобного, стиль 2001-го года - бери код и вставляй куда угодно :)
• форма сознательно сделана в HTML, чтобы вывелась и при отключённом Javascript.

Полный исходник шыдевра:

<script type="text/javascript">
 var result=0, operation=0, new1=0, new2=0, done=1, digit_setted=0, point, temp;
 function reset(value) {
  document.calcf1.screen.value = value;
  result = operation = new1 = new2 = digit_setted = 0;
  done = 1;
 }
 function common(new_temp) {
  point = 1;
  if (new1 || done) {
   new1 = done = 0;
   temp = new_temp;
  }
  for (var i=0; i<temp.length; i++) if (temp[i]=='.') point=0;
 }
 function click1 (arg1,arg2) {
  temp = document.calcf1.screen.value;
  if (arg2=='.') {
   common('0');
   if (point) {
    temp += arg2;
    document.calcf1.screen.value = temp;
    digit_setted = 0;
   }
  }
  if (arg1>=0 && arg1<=9)  {
   common('');
   if (temp==0 && point==1) temp='';
   temp += arg1;
   document.calcf1.screen.value = temp;
   digit_setted = 1;
  }
  if (arg2=='-' || arg2=='+' || arg2=='/' || arg2=='*') {
   if (new1) operation = arg2;
   else {
    if (!new2) {
     operation = arg2;
     result = temp;
     new2=1;
    }
    else {
     result = eval(result + operation + temp);
     operation = arg2;
     document.calcf1.screen.value = result;
    }
    digit_setted=0;
    new1 = 1;
   }
 }
 if (arg2=='1/x' ) { result = eval(1/temp) ; reset(result); }
 else if (arg2=='sqrt') { result = Math.sqrt(temp); reset(result); }
 else if (arg2=='sqr' ) { result = temp*temp; reset(result); }
 else if (arg2=='+/-') document.calcf1.screen.value = eval(-temp);
 else if(arg2=='=' && digit_setted && operation!='0') reset(eval(result + operation + temp));
 else if (arg2=='C') reset(0);
 if (document.calcf1.screen.value[0] == '.') document.calcf1.screen.value = '0' + document.calcf1.screen.value;
}
</script>
<noscript><div align="center">Для работы калькулятора включите в браузере Javascript!</div></noscript>
<div align="center">
 <form name="calcf1"> 
  <table style="background-color: #DDDDDD; border-color: #CCCCCC;" border="1" cellPadding="2" cellSpacing="0"> 
   <tr>
    <td colspan="5" align="center" valign="middle">
     <input name="screen" value="0" size="20" maxlength="20"  style="width: 190px;">
    </td>
   </tr>
   <tr>
    <td colspan="4" align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">
     <input name="C" onclick="click1 (11,'C')" type="button" value="C" style="width: 38px;">
    </td>
   </tr>
   <tr>
    <td align="center" valign="middle">
     <input name="7" onclick="click1 (7 ,'')" type="button" value="7" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="8" onclick="click1 (8 ,'')" type="button" value="8" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="9" onclick="click1 (9 ,'')" type="button" value="9" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="/" onclick="click1 (11,'/')" type="button" value="/" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="sqrt" onclick="click1 (11,'sqrt')" type="button" value="sqrt" style="width: 38px;">
    </td>
   </tr>
   <tr>
    <td align="center" valign="middle">
     <input name="4" onclick="click1 (4,'')" type="button" value="4" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="5" onclick="click1 (5,'')" type="button" value="5" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="6" onclick="click1 (6,'')" type="button" value="6" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="*" onclick="click1 (11,'*')" type="button" value="*" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="sqr" onclick="click1 (11,'sqr')" type="button" value="x^2" style="width: 38px;">
    </td>
   </tr>
   <tr>
    <td align="center" valign="middle">
     <input name="1" onclick="click1 (1,'')" type="button" value="1" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="2" onclick="click1 (2,'')" type="button" value="2" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="3" onclick="click1 (3,'')" type="button" value="3" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="-" onclick="click1 (11,'-')" type="button" value="-" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="1/x" onclick="click1 (11,'1/x')" type="button" value="1/x " style="width: 38px;">
    </td>
   </tr>
   <tr>
    <td align="center" valign="middle">
     <input name="0" onclick="click1 (0,'')" type="button" value="0" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="+/-" onclick="click1 (11,'+/-')" type="button" value=" +/-" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="." onclick="click1 (11,'.')" type="button" value="," style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="+" onclick="click1 (11,'+')" type="button" value="+" style="width: 38px;">
    </td>
    <td align="center" valign="middle">
     <input name="=" onclick="click1 (11,'=')" type="button" value="=" style="width: 38px;">
    </td>
   </tr>
  </table> 
 </form> 
</div>

Из-за текущего стиля блога (с чёрными рамками вокруг полей ввода и кнопок), калькулятор выглядит несколько не так, как будет на отдельной странице:

задуман был такой вид

Ниже прикреплена несколько более современная версия - код обёрнут в переменную, показывается текущая операция, разметка проходит валидацию. Увидеть исходник можно из исходника страницы с калькулятором.

 Открыть Простой офисный калькулятор на Javascript в текущем окне/вкладке (6 Кб)

09.07.2015, 17:01 [9695 просмотров]