javascript寫的簡單的計算器，內(nèi)容很多，方法實用，推薦
更新時間：2011年12月29日 00:07:18 投稿：mdxy-dxy
最近用javascript寫了一個簡單的計算器，自己測試感覺還好,代碼都給了注釋，非常不錯，推薦大家學(xué)習(xí)。
最近用javascript寫了一個簡單的計算器，自己測試感覺還好，先給大家觀賞下界面：
界面就是這樣了，但是功能如何呢？
現(xiàn)在只是個簡單的標(biāo)準(zhǔn)計算器，能進(jìn)行加減乘除連續(xù)運算，以及求余運算。如果發(fā)生被除數(shù)為零的錯誤，下面會給出提示，就像這樣：
自己不知道寫的怎么樣，但是對于新手來說，這肯定是一份大餐，里面可以接觸到的東西不少，可以拿來學(xué)習(xí)。如果有高手看出里面的疏漏、錯誤等望不吝賜教，給予指點。
下面貼上代碼，希望里面的注釋足夠多了。
js部分：
復(fù)制代碼 代碼如下:
var num=0,result=0,numshow="0";
var operate=0; //判斷輸入狀態(tài)的標(biāo)志
var calcul=0; //判斷計算狀態(tài)的標(biāo)志
var quit=0; //防止重復(fù)按鍵的標(biāo)志
function command(num){
var str=String(document.calculator.numScreen.value); //獲得當(dāng)前顯示數(shù)據(jù)
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果當(dāng)前值不是"0"，且狀態(tài)為0，則返回當(dāng)前值，否則返回空值;
str=str + String(num); //給當(dāng)前值追加字符
document.calculator.numScreen.value=str; //刷新顯示
operate=0; //重置輸入狀態(tài)
quit=0; //重置防止重復(fù)按鍵的標(biāo)志
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果當(dāng)前值不是"0"，且狀態(tài)為0，則返回當(dāng)str+"00"，否則返回"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果當(dāng)前值不是"0"，且狀態(tài)為0，則返回當(dāng)前值，否則返回"0";
for(i=0; i<=str.length;i++){ //判斷是否已經(jīng)有一個點號
if(str.substr(i,1)==".") return false; //如果有則不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;
}
function clearscreen(){ //清除數(shù)據(jù)
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //調(diào)用計算函數(shù)
operate=1; //更改輸入狀態(tài)
calcul=1; //更改計算狀態(tài)為加
}
function minus(){ //減法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判斷前一個運算數(shù)是否為零以及防重復(fù)按鍵的狀態(tài)
switch(calcul){ //判斷要輸入狀態(tài)
case 1:result=num+numshow;break; //計算"+"
case 2:result=num-numshow;break; //計算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除數(shù)不能為零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重復(fù)按鍵
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存儲當(dāng)前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}
html部分：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>寫給新手：js表單操作（四） 簡單計算器（二）</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
</style>
<script language="javascript">
//此處插入上面的js代碼
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a target="_blank">I'm Yeah!</a></span><h6>簡單的計算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置顯示窗口，使用onfocus="this.blur();"避免鍵盤輸入-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> <!--配置按鈕-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">歡迎使用javascript計算器！<a target="_blank">反饋</a></span>
</div>
</form>
</div>
</body>
</html>
PS：這里再為大家推薦兩款本站的在線計算器，都是采用js實現(xiàn)，且功能強(qiáng)大，相信對于大家深入了解JavaScript數(shù)學(xué)運算及web設(shè)計會有所幫助：
在線標(biāo)準(zhǔn)計算器：http://tools.jb51.net/jisuanqi/jsq
在線科學(xué)計算器：http://tools.jb51.net/jisuanqi/jsqkexue
相關(guān)文章
javascript復(fù)制粘貼與clipboardData的使用
window.clipboardData可以實現(xiàn)復(fù)制與粘貼的操作，下面有個小示例，想學(xué)習(xí)的朋友可以參考下2014-10-10
這篇文章主要介紹了JavaScript AJAX之惰性載入函數(shù),惰性載入表示函數(shù)執(zhí)行的分支僅會發(fā)生1次,是種JS的優(yōu)化技巧,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了新手快速入門微信小程序組件庫 iView Weapp，iView Weapp 提供了與 iView 一致的 UI 和盡可能相同的接口名稱，大幅度降低了學(xué)習(xí)成本，是一套一套高質(zhì)量的微信小程序 UI 組件庫,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄猨s 連續(xù)賦值的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
正如標(biāo)題所言使用js操作按下Enter焦點移至下一個控件，具體的實現(xiàn)示例如下，需要的朋友可以參考下2013-12-12
通過js將內(nèi)容復(fù)制到剪貼板，本來不難，可是若考慮到瀏覽器的兼容性問題，就變的有點麻煩，借助flash實現(xiàn)瀏覽器的兼容2014-03-03
下面小編就為大家?guī)硪黄獪\談bootstrap使用中的一些問題以及解決過程。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要介紹了uniapp實現(xiàn)微信公眾號支付的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
js 禁止選擇功能實現(xiàn)代碼(兼容IE/Firefox)
有時候出于某種需要，不希望用戶可以選擇某個區(qū)域，進(jìn)行下面的操作，這里給出簡單的代碼。2010-04-04