JavaScript计算器网页版实现代码分享
JavaScript网页计算器代码，该计算器是用DW写的！
HTML篇
<html <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>计算器</title> <linkhref="style/calculator.css"rel="stylesheet"type="text/css"/> <scriptsrc="JavaScript/calculator.js"></script>> </head> <body> <formid="form1"name="form1"method="post"action=""> <tablewidth="320"border="1"cellpadding="0"cellspacing="0"class="trb"id="calculator"> <tr> <tdheight="100"colspan="4"align="left"valign="top"><labelfor="txt"></label> <inputname="txt"type="text"class="txt"id="txt"value="0"onfocus="this.blur();"/></td> </tr> <tr> <tdwidth="80"height="40"align="center"valign="middle"onclick="deleteAll();">C</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="Backspace();">←</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="sign();">±</td> <tdwidth="80"height="40"align="center"valign="middle"class="operator"onclick="add();">＋</td> </tr> <tr> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(7);">7</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(8);">8</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(9);">9</td> <tdwidth="80"height="40"align="center"valign="middle"class="operator"onclick="subtract();">－</td> </tr> <tr> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(4);">4</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(5);">5</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(6);">6</td> <tdwidth="80"height="40"align="center"valign="middle"class="operator"onclick="multiply();">×</td> </tr> <tr> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(1);">1</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(2);">2</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(3);">3</td> <tdwidth="80"height="40"align="center"valign="middle"class="operator"onclick="divide();">÷</td> </tr> <tr> <tdwidth="80"height="40"align="center"valign="middle"onclick="command(0);">0</td> <tdwidth="80"height="40"align="center"valign="middle"onclick="dot();">▪</td> <tdheight="40"colspan="2"align="center"valign="middle"bgcolor="#CC6600"onclick="equal();">＝</td> </tr> </table> <p></p> <p></p> </form> </body> </html>
CSS篇
@charset"utf-8";
/*CSSDocument*/
.trb{
font-family:Georgia,"TimesNewRoman",Times,serif;
font-size:24px;
color:#FFF;
background-color:#333;
text-align:center;
border:1pxsolid#999;
}
.operator{
background-color:#333;
font-size:18px;
color:#C60;
font-family:Verdana,Geneva,sans-serif;
}
td:hover{
font-size:28px;
cursor:pointer;
}
.txt{
height:100px;
width:320px;
background-color:#333;
text-align:left;
vertical-align:bottom;
color:#FFF;
font-size:30px;
}
JavaScript篇
//实现计算器功能
//结果
varresult=0;
//显示框中的数（默认为“0”）
varscreenNum="0";
//数的初始输入状态，默认为0；当按了任意运算符键后，数的输入状态变为1
varstate=0;
//防止重复按运算符键
varavoidRepeat=true;
//运算符键（默认为0--等于号）
varoperator=0;
//第一步：获取按键值，并显示在显示框中
functioncommand(num){
//获取显示框的值
varstr=String(document.form1.txt.value);
//对该值进行判断，如果该值不为"0"，且输入状态0，则返回前者，否则为""(双重三目运算)
//两个判断条件：1、显示框中值是否为"0",2、数的输入状态
str=(str!="0")?((state==0)?str:""):"";
//给当前值追加字符
str=str+String(num);
//刷新显示
document.form1.txt.value=str;
//按了任意数字键后，数的输入状态变为0
state=0;
//重置防止重复按键
avoidRepeat=true;
}
//第二步：确保输入的数是合法的，每个数至多只有一个小数点
functiondot(){
varstr=String(document.form1.txt.value);
//若该数前面未接运算符，则返回前值，否则为"0"；
str=(state==0)?str:"0";
//Java里String有length()方法，而JS里String有length属性
for(i=0;i<=str.length;i++){
//substr()获取下标从i开始，个数为1个的子串
if(str.substr(i,1)=="."){
//当存在小数点时，则程序终止
return;
}
}
//若无小数点，则在该数后面加上
str=str+".";
//刷新显示
document.form1.txt.value=str;
//恢复数的初始输入状态
state=0;
}
//第三步：处理退格键
functionBackspace(){
varstr=String(document.form1.txt.value);
//若显示框中数不等于"0",则返回str，否则返回""
str=(str!="0")?str:"";
//获取子串
str=str.substr(0,str.length-1);
//若str不为"",则返回子串str，否则str="0"
str=(str!="")?str:"0";
//刷新显示
document.form1.txt.value=str;
}
//第四步：删除所有
functiondeleteAll(){
//显示框设为"0"
document.form1.txt.value="0";
//恢复数的初始输入状态
state=0;
//恢复运算符键，默认为0--等于号
operator=0;
}
//第五步：加法
functionadd(){
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//更改运算符键，1--加号
operator=1;
}
//第六步：减法
functionsubtract(){
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//2--减号
operator=2;
}
//第七步：乘法
functionmultiply(){
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//3--乘号
operator=3;
}
//第八步：除法
functiondivide(){
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//4--除号
operator=4;
}
//第九步：正负号
functionsign(){
//5--正负号
operator=5;
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//0--等于号
operator=0;
//正负号可以连续按
avoidRepeat=true;
}
//第十步：等于
functionequal(){
//调用计算函数
calculate();
//更改数的输入状态
state=1;
//0--等于号
operator=0;
}
//第十一步：计算
functioncalculate(){
//获取显示框中的值
screenNum=Number(document.form1.txt.value);
if(avoidRepeat){
switch(operator){
case1:
result=result+screenNum;
document.form1.txt.value=result;
break;
case2:
result=result-screenNum;
document.form1.txt.value=result;
break;
case3:
result=result*screenNum;
document.form1.txt.value=result;
break;
case4:
if(screenNum==0){
//设置显示框的值
document.getElementById("txt").value="除数不能为0";
//3s后，执行清屏函数
setTimeout(clearScreen,3000);
}else{
result=result/screenNum;
document.form1.txt.value=result;
}
break;
case5:
result=(-1)*screenNum;
document.form1.txt.value=result;
break;
case0:
result=screenNum;
document.form1.txt.value=result;
break;
}
//当按了运算符键后，不能再按
avoidRepeat=false;
}
}
//第十二步：清屏函数
functionclearScreen(){
document.getElementById("txt").value="0";
}
关于计算器的精彩文章请查看《计算器专题》，更多精彩等你来发现！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。