Javascript white concise calculator, javascript Calculator

Javascript white concise calculator, javascript Calculator

The calculator code in this article is very simple. You can easily apply this webpage special effect to your project.

HTML

First, we place an input box and multiple calculator buttons on the webpage.

<div id="calcuator">   <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />   <div id="btn-list">     <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">       C</div>     <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">       +/-</div>     <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">       %</div>     <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">       ←</div>     <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">       7</div>     <div onclick="typetoinput('8')" class=" btn-30 btn-radius">       8</div>     <div onclick="typetoinput('9')" class=" btn-30 btn-radius">       9</div>     <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">       +</div>     <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">       -</div>     <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">       4</div>     <div onclick="typetoinput('5')" class=" btn-30 btn-radius">       5</div>     <div onclick="typetoinput('6')" class=" btn-30 btn-radius">       6</div>     <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">       ×</div>     <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">       ÷</div>     <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">       1</div>     <div onclick="typetoinput('2')" class=" btn-30 btn-radius">       2</div>     <div onclick="typetoinput('3')" class=" btn-30 btn-radius">       3</div>     <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">       ײ</div>     <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">       √</div>     <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">       0</div>     <div onclick="typetoinput('.')" class=" btn-30 btn-radius">       .</div>     <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">       =</div>   </div> </div>

Js

Perform the following operations based on the Operation Type:

function operator(type) {   switch (type) {   case "clear":     input.value = "0";     _string.length = 0;     /*document.getElementById("ccc").innerHTML="";         for(i=0;i<_string.length;i++)         {           document.getElementById("ccc").innerHTML+=_string[i]+" "             }*/     break;   case "backspace":     if (checknum(input.value) != 0) {       input.value = input.value.replace(/.$/, '');       if (input.value == "") {         input.value = "0";       }     }     break;   case "opposite":     if (checknum(input.value) != 0) {       input.value = -input.value;     }     break;   case "percent":     if (checknum(input.value) != 0) {       input.value = input.value / 100;     }     break;   case "pow":     if (checknum(input.value) != 0) {       input.value = Math.pow(input.value, 2);     }     break;   case "sqrt":     if (checknum(input.value) != 0) {       input.value = Math.sqrt(input.value);     }     break;   case "plus":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "plus"input.value = "+";       input.name = "type";     }     break;   case "minus":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "minus"input.value = "-";       input.name = "type";     }     break;   case "multiply":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "multiply"input.value = "×";       input.name = "type";     }     break;   case "divide":     if (checknum(input.value) != 0) {       _string.push(input.value);       _type = "divide"input.value = "÷";       input.name = "type";     }     break;   case "result":     if (checknum(input.value) != 0) {       _string.push(input.value);       if (parseInt(_string.length) % 2 != 0) {         _string.push(_string[_string.length - 2])       }       if (_type == "plus") {         input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "minus") {         input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "multiply") {         input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);         input.name = "type"       } else if (_type == "divide") {         input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);         input.name = "type"       }       break;     }    } }

The above is all the content of this article. I hope you will like it.