Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>js Simple Calculator </title>
<style type= "Text/css" >
table{
Text-align:center;
}
input#input{
Text-align:right;
Background: #fff;
border:1px solid #ccc;
width:150px;
}
input{
width:150px;
height:30px;
}
#textfield4 {
width:300px;
}
</style>
<body>
<table width= "80%" border= "1" cellpadding= "5" cellspacing= "0" bordercolor= "#ccc" >
<tr>
<TD colspan= "4" align= "Right" > Visual display Calculation effect:
<input name= "Textfield1" type= "text" id= "textfield1" value= "0" size= "" maxlength= "" readonly= "/>
<span id= "Fuhao" > </span>
<input name= "Textfield2" type= "text" id= "textfield2" size= "" maxlength= "" readonly= "/>
<span id= "eq" > = </span>
<input name= "textfield3" type= "text" id= "textfield3" size= "" maxlength= "" readonly= "/></td></tr >
</table>
<br/>
<table width= "80%" border= "1" cellpadding= "5" cellspacing= "0" bordercolor= "#ccc" >
<tr>
<TD colspan= "4" align= "right" >
The general calculator shows the effect:
<input id= "Textfield4" type= "text" value= "0" size= "" "Maxlength=" "readonly="/></td></tr>
</table>
<br/>
<table width= "80%" border= "1" cellpadding= "5" cellspacing= "0" bordercolor= "#ccc" id= "Btn_div" >
<tr>
<TD width= "25%" ><input type= "button" Name= "Submit" value= "0" id= "zero"/></td>
<TD width= "25%" ><input type= "button" Name= "Submit2" value= "1" id= "one"/></td>
<TD width= "25%" ><input type= "button" Name= "Submit3" value= "2" id= "a"/></td>
<TD width= "25%" ><input type= "button" Name= "Submit20" value= "delete" id= "del"/></td>
</tr>
<tr>
<TD ><input type= "button" Name= "SUBMIT4" value= "3" id= "three"/></td>
<TD ><input type= "button" Name= "Submit5" value= "4" id= "four"/></td>
<TD ><input type= "button" Name= "Submit6" value= "5" id= "five"/></td>
<TD ><input type= "button" Name= "Submit19" value= "reset" id= "reset"/></td>
</tr>
<tr>
<TD ><input type= "button" Name= "Submit7" value= "6" id= "Six"/></td>
<TD ><input type= "button" Name= "Submit8" value= "7" id= "seven"/></td>
<TD ><input type= "button" Name= "Submit9" value= "8" id= "eight"/></td>
<TD ><input type= "button" Name= "Submit18" value= "." Id= "dot"/></td>
</tr>
<tr>
<TD ><input type= "button" Name= "Submit10" value= "9" id= "Nine"/></td>
<TD ><input type= "button" Name= "Submit11" value= "+" id= "Add"/></td>
<TD ><input type= "button" Name= "Submit12" value= "-" id= "sub"/></td>
<TD ><input type= "button" Name= "Submit17" value= "absolute value" id= "ABS"/></td>
</tr>
<tr>
<TD ><input type= "button" Name= "Submit13" value= "%" id= "mod"/></td>
<TD ><input name= "Submit14" type= "button" value= "x" id= "Cheng"/></td>
<TD ><input type= "button" Name= "Submit15" value= "÷" id= "Chu"/></td>
<TD ><input type= "button" Name= "Submit16" value= "=" id= "Deng"/></td>
</tr>
</table>
<p>
<script type= "Text/javascript" >
var eventutil = {//Jianxin object
Addhandler:function (Element,type,func) {//Add Event
if (Element.addeventlistener) {
Element.addeventlistener (Type,func,false);
}else if (element.attachevent) {
Element.attachevent ("on" + Type,func);
}else{
Element["on" + type] = func;
}
},
Getevent:function (Event) {//Get Event Object
return event?event:window.event;
},
Gettarget:function (Event) {//Get incident target
return Event.target | | Event.srcelement;
},
Preventdefault:function (Event) {//block event's default behavior
if (Event.preventdefault) {
return Event.preventdefault ();//Non IE
}else{
Event.returnvalue = false;//ie
}
},
Removehandler:function (Element,type,func) {//Cancel Event
if (Element.removeeventlistener) {
Element.removeeventlistener (Type,func,false);
}else if (element.detachevent) {
Element.detachevent ("on" + Type,func);
}else{
Element["on" + type] = NULL;
}
},
Stoppropagation:function (Event) {//Cancel event bubbling
if (event.stoppropagation) {
Event.stoppropagation ();//Non IE
}else{
Event.cancelbubble = true;//ie
}
}
};
var input4 = document.getElementById ("Textfield4"),
INPUT1 = document.getElementById ("Textfield1"),
Input2 = document.getElementById ("Textfield2"),
INPUT3 = document.getElementById ("textfield3"),
F_span = document.getElementById ("Fuhao"),
Fuhao = "",//record arithmetic symbol
Fuhao1 = "",
STR1 = "",
STR2 = "",
STR3 = "",
STR5 = "",
CLK = 0,//Number of calculations
REG1 =/^-? [1-9]\d*\.? \d*$/,//The format of numbers that begin with a 0 divide
REG2 =/^-?0 (?! \d) \.? \d*$/,//a decimal number starting with 0, 0 cannot be followed by numbers, (?! \d) indicates that 0 is not followed by a number, but does not occupy a bit, with [^\d] does not, it will anyway match a character 0. 123 matches also.
Reg3 =/^-?0{2,}/,//0 appears 2 times or more
REG4 =/^-$/,//Negative sign repeat 2 times or more
STR4 = false,//Determines whether the symbol is clicked
Input4_str= "";//input4.value;
var clicknum = function () {
var value = This.value;
if (!STR4) {//arithmetic symbol is not clicked, the number entered at this time is assigned to STR1
if (/[0-9]|\./.test (value)) {//Allow only numbers and decimal points to be entered
if (CLK = = 2) {
STR1 = "";//click on the Number button to clear the STR1,STR2 and start a new calculation again.
STR2 = "";
CLK = 0;
}
if (Reg1.test (str1+value) | | reg2.test (STR1 + value)) {//To determine the number format of the input
if (!reg3.test (str1 + value)) {//cannot enter more than 0 consecutive
STR1 + = value;//Assignment to value 1
Input4.value = str1;
Input1.value = str1;
}
}
}
}else{//arithmetic symbol has been clicked, this time assigned to STR2
if (/[0-9]|\./.test (value)) {
if (Reg1.test (str2+value) | | reg2.test (STR2 + value)) {//To determine the number format of the input
if (!reg3.test (str2 + value)) {//cannot enter more than 0 consecutive
STR2 + = value;//Assignment to value 1
Input4.value = str2;
Input2.value = str2;
}
}
}
}
if (value = = "Absolute value") {
if (Input4.value! = "") {
STR5 = Input4.value;
STR5 = str5-0;
STR5 = Math.Abs (STR5);
Input4.value = STR5;
Input3.value = STR5;
}
}
if (/[%+x÷-]/.test (value) && str2 = = "") {//To determine what to do when the value entered is an arithmetic symbol subtraction
if (str1! = "" && str1! = "-") {//str1 is not empty and not only when the minus sign
STR4 = true;//arithmetic symbol has been clicked
clk=1;
Fuhao = value;
Fuhao1 = Fuhao;
f_span.innerhtml = Fuhao1;
}else{
if (reg4.test (str1 + value)) {//minus sign cannot be entered multiple times
STR1 = value;
alert (STR1);
Input4.value = STR1;//STR1 allows you to enter the minus sign once
Input1.value = str1;
}
}
}
if (/[%+x÷-]/.test (value) && str2! = "") {//When str2 is not empty, the input symbol equals equals = operation;
if (CLK = = 0) {
alert (123);
Fuhao1 = value;
STR1 = str1-0;//converted to Digital
STR2 = str2-0;
Switch (FUHAO1) {//To determine the input symbol to perform the corresponding calculation
Case "+":
Input4.value = STR1+STR2;
Input3.value = str1 + str2;
Break
Case "-":
Input4.value = STR1-STR2;
Input3.value = STR1-STR2;
Break
Case "X":
Input4.value = STR1*STR2;
Input3.value = STR1*STR2;
Break
Case "÷":
if (str2 = = 0) {
Input4.value = "Divisor cannot be 0";
Break
}else{
Input4.value = STR1/STR2;
Input3.value = STR1/STR2;
Break
}
Case "%":
Input4.value = STR1%STR2;
Input3.value = STR1%STR2;
Break
}
STR1 = input4.value;//Assigns the result to STR1 for easy continuation of calculation
alert (STR1);
Input1.value = str1;
STR2 = "";//Empty str2
Input2.value = "";
STR4 = false;//Set symbol click to initialize
CLK = 1;
}
if (CLK = = 1 | | clk = = 2) {
str1 = input4.value;//is calculated again, the result is assigned to STR1
Input1.value = str1;
STR2 = "";
Input2.value = str2;
Fuhao1 = value;
f_span.innerhtml = Fuhao1;
CLK = 0;
STR4 = true;
}
}
if (value = = "=") {//click equals sign to execute
if (str1! = "" && str2! = "") {//STR1 and str2 are not empty when executed, otherwise do not execute
STR1 = str1-0;//converted to Digital
STR2 = str2-0;
Switch (FUHAO1) {//To determine the input symbol to perform the corresponding calculation
Case "+":
Input4.value = STR1+STR2;
Input3.value = str1 + str2;
Break
Case "-":
Input4.value = STR1-STR2;
Input3.value = STR1-STR2;
Break
Case "X":
Input4.value = STR1*STR2;
Input3.value = STR1*STR2;
Break
Case "÷":
if (str2 = = 0) {
Input4.value = "Divisor cannot be 0";
Break
}else{
Input4.value = STR1/STR2;
Input3.value = STR1/STR2;
Break
}
Case "%":
Input4.value = STR1%STR2;
Input3.value = STR1%STR2;
Break
}
}
STR1 = input4.value;//Assigns the result to STR1 for easy continuation of calculation
Input1.value = str1;
Alert (1);
STR2 = "";//Empty str2
STR4 = false;//Set symbol click to initialize
CLK = 2;
Fuhao = "";
}
if (value = = "Reset") {
STR1 = "";
STR2 = "";
STR4 = false;
Fuhao = "";
Input4.value = 0;
CLK = 0;
Input1.value = "";
Input2.value = "";
f_span.innerhtml = "";
Input3.value = "";
}
if (value = = "Delete") {
if (str1 = = "") {
STR4 = false;
}
if (Fuhao1 = = "" && str1!= "") {
Alert (12);
STR1 + = "";
STR1 = str1.substring (0,str1.length-1);
Input1.value = str1;
Input4.value = str1;
}
if (str2 = = "" && fuhao1! = ") {
Fuhao1 = "";
f_span.innerhtml = Fuhao1;
STR4 = false;
alert (STR1);
}
if (Input3.value = = "" && str2! = ") {
Alert (1);
STR2 + = "";
str2 = str2.substring (0,str2.length-1);
alert (STR2);
Input2.value = str2;
Input4.value = str2;
STR4 = true;
}
if (Input3.value! = "") {
Input3.value = input3.value.substring (0,input3.value.length-1);
Input4.value = Input3.value;
}
}
}
var box = document.getElementById ("Btn_div");
var Inputarr = box.getelementsbytagname ("input");
for (i=0;i<inputarr.length;i++) {
Eventutil.addhandler (Inputarr[i], "click", Clicknum);
}
</script>
</p>
</body>Write a calculator with JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
