(1):效果图如下:
先搭建起HTML页面.代码如下:(亲！请耐心的把这段代码看下去哦！)
<body>
<div id="calculator"> <!-- calculator:计算器. -->
(这个html搭建是很标准的模块化，<div>...</div>，便于后期维护.)
<div id="calcu-head"> <!-- calcu-head:计算器头部-->
<h6 style="color:#F00; font-size:16px;">简单的计算器</h6></div>
//在头部设置一个h6标签的文字.
<form name="calculator" action="" method="get">
//设置form表单.以下的搭建都是在from表单下的.
<div id="calcu-screen" > <!--calcu-screen:计算器屏-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" style="width:215px; height:20px;"/>
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
</div>
<div id="calcu-btn" class="buttonbox" style="width:420px;" > <!--calcu-btn:计算器按钮.--->
<!--配置按钮-->
<input type="button" value="7" onclick="command(7)">
//按钮属性为7,按下时执行command()函数.
<input type="button" value="8" onclick="command(8)">
<input type="button" value="9" onclick="command(9)">
<input type="button" value="" onclick="del()">
//按钮属性为，按下时执行del()函数.
<input type="button" value="C" onclick="clearscreen()"><br>
//按钮属性为C,按下按钮执行clearscreen()函数.
<input type="button" value="4" onclick="command(4)">
<input type="button" value="5" onclick="command(5)">
<input type="button" value="6" onclick="command(6)">
<input type="button" value="x" onclick="times()">
//按钮属性为X号,按下按钮执行times()函数.
<input type="button" value="÷" onclick="divide()"><br>
//按钮属性为÷号，按下按钮执行divide()函数.
<input type="button" value="1" onclick="command(1)">
<input type="button" value="2" onclick="command(2)">
<input type="button" value="3" onclick="command(3)">
<input type="button" value="+" onclick="plus()">
//按钮属性为+号，按下按钮执行plus()函数.
<input type="button" value="-" onclick="minus()"><br>
//按钮属性为-号,按下按钮执行minus()函数.
<input type="button" value="0" onclick="command(0)">
<input type="button" value="00" onclick="dzero()">
//按钮属性为”00”,按下按钮执行dzero()函数.
<input type="button" value="." onclick="dot()">
//按钮属性为”.”号,按下按钮执行dot()函数。
<input type="button" value="%" onclick="persent()">
//按钮属性为”%”号,按下按钮执行persent()函数。
<input type="button" value="=" onclick="equal()">
//按钮属性为”=”号,按下按钮执行equal()函数。
</div>
</form>
</div>
</body> 我们搭建好页面后，在写js代码。（亲，在坚持下哦！）
<script language="javascript">
var num=0,result=0,numshow="0";
var operate=0; //判断运算状态的标志(0或1)
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(); //调用计算函数(作用：储存第1个操作数的值.给num.)
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="";
}
</script>为了便于亲的理解，我在这里写出几个例子.
Eg1:7+8=.
用户首先按数字按钮7.执行command()函数。
<input type="button" value="7" onclick="command(7)">执行command()函数。（显示用户输入的数字.）
function command(num){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "") : "";
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
用户接着按下“+”号键。执行plus()函数。
function plus(){ //加法
calculate(); //调用计算函数(作用：储存第1个操作数的值.给num.)
operate=1; //更改运算状态
calcul=1; //更改计算状态为加
}在调用calculate()函数。（储存第1个操作数.）
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
。。。。。。。
。。。。。。。。**因为篇幅有限，此处省略一些代码**。
。。。。。。。。。
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}用户接着输入数字“8”。再次调用command()函数。
（显示用户输入的数字“8”）
<input type="button" value="8" onclick="command(8)">command()函数代码,同上.//这里为了节省篇幅。请读者凑合下吧。sorry.
用户接着输入“=”号。执行equal()函数。
<input type="button" value="=" onclick="equal()">执行equal()函数，在调用calculate()函数。
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}执行calculate()函数中的case1...{}语句块。
case 1:result=num+numshow;break; //计算"+" 返回2数相加的结果。
读者把这个例子看懂的话，对这个代码的逻辑也就理解了。
但是这段程序写的还是有不少bug:(me后期还要继续斧正.)
eg1:（符号的优先级。）7+8*3=
按照代码的逻辑来计算的话，结果为45。
但实际运算结果为31.
eg2:(页面设计的不友好。)如：7+8=
当用户输入“8”时，会覆盖用户输入的7.
eg3:(代码写的太臃肿了,多个函数调用，不够精简.)
随时随地看视频
