簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:25:50

簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作

簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作:<html> <head> <title>JS版計(jì)算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作:<html> <head> <title>JS版計(jì)算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-

<html>
<head>
<title>JS版計(jì)算器</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代碼可以放置在任意位置，按照先后順序依次執(zhí)行 一般放在head標(biāo)簽之間-->
<script type="text/javascript">
 /* 定義一個(gè)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;
 }
 }
 //創(chuàng)建對(duì)象
 var calculator=new Calculator();
 /*定義全局變量*/
 var val=0; //放置輸入的值
 var xval=0;//保存轉(zhuǎn)換Number類型的值
 var temp=0; //保存第一次輸入的值 
 var oper="";//保存輸入的操作符
 /*獲取輸入數(shù)字*/
 function inputEvent(e){
 
 val=e.value
 var xsval=document.getElementById("inp1"); 
 xsval.value+=val; //連續(xù)輸入數(shù)字(String類型)
 //轉(zhuǎn)換Number類型
 xval=parseFloat(xsval.value);
 
 }
 /*獲取第一行的數(shù)據(jù)*/
 function inputPCB(e){
 //window.alert(e.value);
 var xsval=document.getElementById("inp1");
 if(e.value=="Clear"){
 xsval.value="";
 }else if(e.value=="Back"){
 /*這個(gè)功能還沒有實(shí)現(xiàn)，有興趣的朋友可以自己做一做*/
 }else if(e.value=="POWER"){
 //計(jì)算平方
 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");
 //保存上次計(jì)算結(jié)果，并對(duì)字符串進(jìn)行轉(zhuǎn)換Number類型
 temp=parseFloat(xsval.value);
 //第一次輸入的值設(shè)置為空
 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="";
 }
 }
 /*計(jì)算結(jié)果*/
 function inputEquel(e){
 var xsval=document.getElementById("inp1"); 
 if(e.value=="="){
 //window.alert(xval);
 //調(diào)用對(duì)象方法
 xsval.value=calculator.jisuan(temp,xval,oper);
 }
 }
</script>
<!--css 樣式-->
<style>
 input{
 width:60px;
 }
 #inp1{
 width:280px;
 text-align:right;
 }
</style>
</head>
<body>
 <table border="1">
 <!--顯示結(jié)果行-->
 <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
 
 <!--第一行-->
 <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>
 <!--第二行-->
 <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>
 <!--第三行-->
 <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> 
 <!--第四行-->
 <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>
 <!--第五行-->
 <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>

簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作