簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作
<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>

PS:這里再為大家推薦兩款本站的在線計(jì)算器,都是采用js實(shí)現(xiàn),且功能強(qiáng)大,相信對(duì)于大家深入了解JavaScript數(shù)學(xué)運(yùn)算及web設(shè)計(jì)會(huì)有所幫助:
在線標(biāo)準(zhǔn)計(jì)算器:http://tools.jb51.net/jisuanqi/jsq
在線科學(xué)計(jì)算器:http://tools.jb51.net/jisuanqi/jsqkexue
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
- 簡(jiǎn)易的JS計(jì)算器實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)算器實(shí)例代碼
- javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼
- js制作簡(jiǎn)易計(jì)算器
- JavaScript實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器
- 超級(jí)簡(jiǎn)易的JS計(jì)算器實(shí)例講解(實(shí)現(xiàn)加減乘除)
- js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)算器
- 用JavaScript做一個(gè)簡(jiǎn)易計(jì)算器的三種方法舉例
相關(guān)文章
C#中對(duì)象與JSON字符串互相轉(zhuǎn)換的三種方式
這篇文章介紹了C#中對(duì)象與JSON字符串互相轉(zhuǎn)換的三種方式,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
客戶端腳本中常常出現(xiàn)的一些問題和調(diào)試技巧
客戶端腳本中常常出現(xiàn)的一些問題和調(diào)試技巧...2007-01-01
JavaScript瀏覽器對(duì)象之一Window對(duì)象詳解
下面小編就為大家?guī)硪黄狫avaScript瀏覽器對(duì)象之一Window對(duì)象詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
簡(jiǎn)述JavaScript中正則表達(dá)式的使用方法
這篇文章主要介紹了JavaScript中正則表達(dá)式的使用方法,正則表達(dá)式是JS進(jìn)階學(xué)習(xí)中的重要知識(shí),本文簡(jiǎn)述了JS對(duì)正則表達(dá)式的支持情況,需要的朋友可以參考下2015-06-06
深入理解JavaScript系列(30):設(shè)計(jì)模式之外觀模式詳解
這篇文章主要介紹了深入理解JavaScript系列(30):設(shè)計(jì)模式之外觀模式詳解,外觀模式(Facade)為子系統(tǒng)中的一組接口提供了一個(gè)一致的界面,此模塊定義了一個(gè)高層接口,這個(gè)接口值得這一子系統(tǒng)更加容易使用,需要的朋友可以參考下2015-03-03
document.write與writeln的輸出內(nèi)容區(qū)別說明
document.write()和document.writeln都是JavaScript向客戶端寫入的方法,writeln是以行方式輸出的,但并不是指頁面實(shí)際效果中的換行,兩種方法在查看源代碼時(shí)才看得出區(qū)別。2010-10-10
Node.js生成HttpStatusCode輔助類發(fā)布到npm
本篇文章小編為大家介紹利用Node.js為Node.js生成HttpStatusCode輔助類并發(fā)布到npm,有需要的朋友可以參考一下2013-04-04

