用html写的计算器带注释,javascript写的简单的计算器，内容很多，方法实用，推荐...

最近用javascript写了一个简单的计算器，自己测试感觉还好，先给大家观赏下界面：

界面就是这样了，但是功能如何呢？

现在只是个简单的标准计算器，能进行加减乘除连续运算，以及求余运算。如果发生被除数为零的错误，下面会给出提示，就像这样：

自己不知道写的怎么样，但是对于新手来说，这肯定是一份大餐，里面可以接触到的东西不少，可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教，给予指点。

下面贴上代码，希望里面的注释足够多了。

js部分：

var num=0,result=0,numshow="0";

var operate=0; //判断输入状态的标志

var calcul=0; //判断计算状态的标志

var quit=0; //防止重复按键的标志

function command(num){

var str=String(document.calculator.numScreen.value); //获得当前显示数据

str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;

str=str + String(num); //给当前值追加字符

document.calculator.numScreen.value=str; //刷新显示

operate=0; //重置输入状态

quit=0; //重置防止重复按键的标志

}

function dzero(){

var str=String(document.calculator.numScreen.value);

str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当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"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";

for(i=0; i<=str.length;i++){ //判断是否已经有一个点号

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(){ //清除数据

num=0;

result=0;

numshow="0";

document.calculator.numScreen.value="0";

}

function plus(){ //加法

calculate(); //调用计算函数

operate=1; //更改输入状态

calcul=1; //更改计算状态为加

}

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){ //判断前一个运算数是否为零以及防重复按键的状态

switch(calcul){ //判断要输入状态

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="被除数不能为零！"; setTimeout(clearnote,4000)} break;

case 5:result=num%numshow;break;

}

quit=1; //避免重复按键

}

else{

result=numshow;

}

numshow=String(result);

document.calculator.numScreen.value=numshow;

num=result; //存储当前值

}

function clearnote(){ //清空提示

document.getElementById("note").innerHTML="";

}

html部分：

写给新手：js表单操作(四) 简单计算器(二)

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;

}

//此处插入上面的js代码

© I'm Yeah!

简单的计算器

• 7
• 8
• 9
• ←
• C
• 4
• 5
• 6
• ×
• ÷
• 1
• 2
• 3
• +
• -
• 0
• 00
• .
• %
• =

欢迎使用javascript计算器！反馈

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