<html>
<head>
<title>JS version calculator</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js code can be placed in any position and executed in sequence in sequence. It is usually placed between the head tags-->
<script type="text/javascript">
/* Define a Calculator class*/
function Calculator(){
=function(num1,num2,oper){
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
}
return res;
}
}
//Create an object
var calculator=new Calculator();
/*Define global variables*/
var val=0; //Place the input value
var xval=0;//Save the value of the converted Number type
var temp=0; //Save the value entered for the first time
var operand="";//Save input operator
/*Get input number*/
function inputEvent(e){
val=
var xsval=("inp1");
+=val; //Continuous input of numbers (String type)
//Convert Number type
xval=parseFloat();
}
/*Get the first line of data*/
function inputPCB(e){
//();
var xsval=("inp1");
if(=="Clear"){
="";
}else if(=="Back"){
/*This function has not been implemented yet. Interested friends can do it by themselves*/
}else if(=="POWER"){
//Calculate squared
=(,2);
}
}
/*Input operator*/
function inputOper(e){
oper=;
//(typeof oper);
//oper=(0);
if (=="+"){
var xsval=("inp1");
//Save the last calculation result and convert the string into the Number type
temp=parseFloat();
//The value entered for the first time is set to empty
="";
}else if(=="-"){
var xsval=("inp1");
temp=parseFloat();
="";
}else if(=="*"){
var xsval=("inp1");
temp=parseFloat();
="";
}else if(=="/"){
var xsval=("inp1");
temp=parseFloat();
="";
}
}
/*calculation result*/
function inputEquel(e){
var xsval=("inp1");
if(=="="){
//(xval);
//Calling the object method
=(temp,xval,oper);
}
}
</script>
<!--css style-->
<style>
input{
width:60px;
}
#inp1{
width:280px;
text-align:right;
}
</style>
</head>
<body>
<table border="1">
<!--Show result line->
<tr><td colspan="4"><input type="text" value="" name="xianshi"/></td></tr>
<!--First line-->
<tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>
<!--The second line-->
<tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr>
<!--The third line-->
<tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr>
<!--Fourth Line-->
<tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr>
<!--Fifth Line-->
<tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr>
</table>
</body>
</html>