實(shí)用計(jì)算器JS代碼怎么寫

2012/11/7 18:51:05作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

實(shí)用計(jì)算器JS代碼

【實(shí)例描述】

JavaScript雖然是腳本語言，但也可以設(shè)計(jì)一些常用的工具，如日歷，計(jì)算器等。本例學(xué)習(xí)使用JavaScript制作計(jì)算器。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
<script language="JavaScript">
var results='' ;       //顯示結(jié)果
var previouskey='';    //代表上一個(gè)字符
var re=/(\/|\*|\+|-)/  //用來判斷+-*/的正則
var re2=/(\/|\*|\+|-){2}$/;  //用來判斷出現(xiàn)2次+-*/的正則
var re3=/.+(\/|\*|\+|-).+/;  //用來判斷小數(shù)點(diǎn)+-*/的正則
var re4=/\d|\./ ;            //用來判斷(小數(shù)點(diǎn)或數(shù)值)的正則
var re5=/^[^\/\*\+].+\d$/;   //用來判斷(以+-*/開始)的正則
var re6=/\./;                //用來判斷小數(shù)點(diǎn)的正則
//計(jì)算結(jié)果的方法
function calculate()
{
//判斷如何用戶輸入了1個(gè)值，然后單擊了"="
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results='';
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="輸入錯(cuò)誤!";
return;
}
//以下是要求長度只能保持在12位以內(nèi)(有小數(shù)點(diǎn)的情況下)
results=eval(results);   //轉(zhuǎn)換為數(shù)值
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
//出現(xiàn)2次計(jì)算符號(hào)的情形
results+=event.srcElement.innerText;
if (results.match(re2))
results=results.substring(0,results.length-2)+
results.charAt(results.length-1);
result.innerText=results;
}}
function calculateresult()
{
//當(dāng)首字符輸入錯(cuò)誤時(shí)
if (!results.match(re5)){
result.innerText="輸入錯(cuò)誤!";
return;}
results=eval(results);  //轉(zhuǎn)換結(jié)果為數(shù)值型
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
function pn()
{
//首字符為負(fù)數(shù)的計(jì)算
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script>
需要在body中添加一個(gè)Table，用來呈現(xiàn)計(jì)算器的外觀，代碼如下所示：
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="100%" valign="top"><table border="2" width="200" cellspacing="0"
cellpadding="0" bgcolor="#000000" style="border-color:black"
onClick="previouskey=event.srcElement.innerText">
<tr>
<td width="100%" bgcolor="#FFFFFF" id="result"
style="font:bold 20px Verdana;color:black;
text-align='right'">0</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center"><table 
border="0" width="100%"
cellspacing="0" cellpadding="0" style="font:bold 20px 
Verdana;color:white">
<tr><td width="80%" align="center"><table border="1" 
width="100%" cellspacing="0"
cellpadding="0" style="cursor:hand;font:bold 20px 
Verdana;color:white"
onMouseover="if (event.srcElement.tagName=='TD')
event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" 
onselectStart="return false"
onClick="calculate()" height="82">
<tr><td width="25%" align="center" height="17">7</td>
<td width="25%" align="center" height="17">8</td>
<td width="25%" align="center" height="17">9</td>
<td width="25%" align="center" height="17">/</td>
</tr><tr><td width="25%" align="center" height="19">4</td>
<td width="25%" align="center" height="19">5</td>
<td width="25%" align="center" height="19">6</td>
<td width="25%" align="center" height="19">*</td>
</tr><tr><td width="25%" align="center" height="19">1</td>
<td width="25%" align="center" height="19">2</td>
<td width="25%" align="center" height="19">3</td>
<td width="25%" align="center" height="19">-</td>
</tr><tr><td width="25%" align="center" height="19">0</td>
<td width="25%" align="center" height="19"
onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" align="center" height="19">.</td>
<td width="25%" align="center" height="19">+</td>
</tr></table></td><td width="20%"><div align="left">
<table border="1" width="100%" cellspacing="0"
cellpadding="0"><tr><td width="100%" 
style="cursor:hand;font:bold 20px Verdana;
color:white;text-align:center"
onClick="result.innerText=0;results=''">C</td>
</tr></table></div><div align="left"><table border="1" 
width="100%" cellspacing="0" cellpadding="0"
height="81">
<tr><td width="100%" style="cursor:hand;font:bold 32px Verdana;
color:white;text-align:center"
onMouseover="event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" 
onClick="calculateresult()">=
</body>
</html>

 
【運(yùn)行效果】

實(shí)用計(jì)算器運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)在于對(duì)用戶輸入字符的判斷。這里要提到的就是正則表達(dá)式，其在JavaScript中的應(yīng)用非常靈活，可用來判斷用戶輸入的數(shù)字符是否合法，也可用來截取頁面的內(nèi)容。本例對(duì)使用的正則表達(dá)式進(jìn)行了詳細(xì)的注釋，要了解正則表達(dá)式的詳細(xì)應(yīng)用語法，可參考相關(guān)資料。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：實(shí)用計(jì)算器進(jìn)行本實(shí)例源碼下載

標(biāo)簽：實(shí)用計(jì)算器 JS代碼