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"; }
关于计算器的精彩文章请查看《计算器专题》,更多精彩等你来发现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。