简易js代码实现计算器操作
简易js代码实现计算器操作
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:JS版计算器/*定义一个Calculator类*/functionCalculator(){this.jisuan=fun...

复制代码 代码如下:

<html>

<head>

<title>JS版计算器</title>

<link rel="stylesheet" type="text/css" href="">

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<>

<script type="text/javascript">

/* 定义一个Calculator类*/

function Calculator(){

this.jisuan=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;

}

}

//创建对象

var calculator=new Calculator();

/*定义全局变量*/

var val=0; //放置输入的值

var xval=0;//保存转换Number类型的值

var temp=0; //保存第一次输入的值

var oper="";//保存输入的操作符

/*获取输入数字*/

function inputEvent(e){

val=e.value

var xsval=document.getElementById("inp1");

xsval.value+=val; //连续输入数字(String类型)

//转换Number类型

xval=parseFloat(xsval.value);

}

/*获取第一行的数据*/

function inputPCB(e){

//window.alert(e.value);

var xsval=document.getElementById("inp1");

if(e.value=="Clear"){

xsval.value="";

}else if(e.value=="Back"){

/*这个功能还没有实现,有兴趣的朋友可以自己做一做*/

}else if(e.value=="POWER"){

//计算平方

xsval.value=Math.pow(xsval.value,2);

}

}

/*输入操作符*/

function inputOper(e){

oper=e.value;

//window.alert(typeof oper);

//oper=oper.substr(0);

if (e.value=="+"){

var xsval=document.getElementById("inp1");

//保存上次计算结果,并对字符串进行转换Number类型

temp=parseFloat(xsval.value);

//第一次输入的值设置为空

xsval.value="";

}else if(e.value=="-"){

var xsval=document.getElementById("inp1");

temp=parseFloat(xsval.value);

xsval.value="";

}else if(e.value=="*"){

var xsval=document.getElementById("inp1");

temp=parseFloat(xsval.value);

xsval.value="";

}else if(e.value=="/"){

var xsval=document.getElementById("inp1");

temp=parseFloat(xsval.value);

xsval.value="";

}

}

/*计算结果*/

function inputEquel(e){

var xsval=document.getElementById("inp1");

if(e.value=="="){

//window.alert(xval);

//调用对象方法

xsval.value=calculator.jisuan(temp,xval,oper);

}

}

</script>

<>

<style>

input{

width:60px;

}

#inp1{

width:280px;

text-align:right;

}

</style>

</head>

<body>

<table border="1">

<>

<tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>

<>

<tr><td><input type="button" value="POWER"/></td><td><input type="button" value="Clear"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>

<>

<tr><td><input type="button" value="1"/></td><td><input type="button" value="2"/></td><td><input type="button"value="3"/></td><td><input type="button" value="4"/></td></tr>

<>

<tr><td><input type="button" value="5"/></td><td><input type="button" value="6"/></td><td><input type="button"value="7"/></td><td><input type="button" value="8"/></td></tr>

<>

<tr><td><input type="button" value="9"/></td><td><input type="button" value="0"/></td><td><input type="button"value="."/></td><td><input type="button" value="="/></td></tr>

<>

<tr><td><input type="button" value="+"/></td><td><input type="button" value="-"/></td><td><input type="button"value="*"/></td><td><input type="button" value="/"/></td></tr>

</table>

</body>

</html>

简易js代码实现计算器操作1

PS:这里再为大家推荐两款本站的在线计算器,都是采用js实现,且功能强大,相信对于大家深入了解JavaScript数学运算及web设计会有所帮助:

在线标准计算器:http://tools.jb51.net/jisuanqi/jsq

在线科学计算器:http://tools.jb51.net/jisuanqi/jsqkexue

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类