Javascript实现基本运算单元

用Javascript实现一个基本的算术单元，具体内容如下

使用表格布局，JS添加事件

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题计算器/title/head style * { margin : 0；padd : 0；}表格{宽度：400像素高度： 600像素；边界崩溃：崩溃；margin: auto}。trr {宽度： 400px高度： 100像素；} .tr R1 {宽度： 400像素；高度： 50px} .tdd { width: 100px高度： 100像素；border: 1px纯银；文本对齐：中心；线高： 100像素；} .BTN {宽度： 100%；高度： 100%;font-size : 2.5 em} .BTN 1 {宽度： 100%；高度： 100%;font-size : 2.5 em} .TD D1 {宽度： 100像素；高度： 50px} .文本{身高： 100%；font-size : 2.5 em文本对齐：右侧；}/style body table tr class=' TRR文本1 ' TD class=' TDD ' col span=' 4 ' input class=' text ' type=' text ' disabled value=' 0 '/TD/tr class=' tr R1 ' TD class=' TDD 1 ' col span=' 2 ' input class=' BTN 1 BTN ' type=' button ' value=' c '/TD TD class=' TDD 1 ' col span=' 2 ' input class=' BTN 1 BTN ' type=' button ' value=' d '/TD/tr type=' button ' value=' 1 '/TD TD TD class=' TDD ' input class=' BTN ' type=' button ' value=' 2 '/TD TD class=' TDD ' input class=' BTN ' type=' button ' value=' 3 ' /TD TD TD类=' TDD '输入类=' BTN '类型='按钮'值='-'//TD/tr类=' TRR ' TD类=' TDD '输入类=' BTN '类型='按钮'值=' 0 '/TD TD TD TD//TD类=' TDD '输入类=' BTN '类型='按钮'值=' '//TD类=' TDD '输入类=' BTN '类型='按钮'值='='//TD/tr/tablescript var obtn=document。 getelementsbyclassname(' BTN ')；var otext=文档。getelementsbyclassname(' text ')[0]；var arr=[]；//定义一个数组，向其中存入数字和运算符for(var I=0；iob TN。长度；i ){ obtn[i].onclick=function () { if(！isNaN(这个。value)| |这个。值==' . '){ //this:代表鼠标点击的obtn if(otext.value.indexOf(' . ')))==-1){ //消除重复'.'的BUG if(otext。价值。length==0){ if(this。价值！=' 0 '){///-otext。值=这个。价值；//| }///| }//| else if(otext。价值。长度==1个文本。value==' 0 '){//| otext。值=这个。价值；//| }//| else if(otext。价值。长度==1个文本。价值！='0'){//初始状态时，若计算器屏幕为' 0 '，otext。值=这个。价值；//实现输入一个非零数字的时候，计算器} //上的数值替换为输入的非零值else if(otext。价值。长度1){//| otext。值=这个。价值；//| }////-} else { if(this。价值！='.'){ //消除重复'.'的BUG if(otext。价值。长度==0){ if(obtn[I]).价值！=' 0 '){ otext。值=这个。价值；} } if(otext。价值。长度=1){ otext。值=这个。价值；} } } }如果(这。value=='/' | | this。value==' * ' | | this。value==' ' | | this。value=='-'){ if(otext。价值！='0'otext.value！otext.value！='-'){ //消除输入重复运算符的BUG，arr[arr。length]=otext。价值；//当输入一个运算符的时候，otext内的价值值arr[arr。长度]=这个。价值；//为''(空),所以判断条件为若otext内的价值值不为空otext.value=//则向数字中传值。

}//这时，一个bug else if (o text。value==' ' this。value=='-'){//消除不能输入负数运算的BUG otext . value=this . value；//单击运算符时，otext的值为空。}//此时判断，如果这个的值是'-'，就会被替换。Elseif (otext。value==' 0 '这个。value=='-'){//此时不能执行类似' 3-3 '双减法的BUG，otext . value=this . value；//因为eval()无法识别带双减法的字符串值。}//如果otext的值为“0”，而此值为}//“-”，则将otext中的值替换为“-”。if(this . value=='='){ if(otext . value . length=1){///-var string=' '；//| if (arr [arr。length-1]='-'o text。value0) {//消除不能像‘3-3’一样进行双减的BUG arr[arr . length-1]=‘’；//输入负值时，判断arr数组中的otext . value=math . ABS(otext . value)；//结束值是否为'-'，如果为'-'，则改为''，}//并让otext.value的值取绝对值。arr[arr . length]=otext . value；//| for(var I=0；长度；I){//| string=arr[I]；//| }///|遍历数组中存储的数字和运算符，并将它们存储在字符串中，otext . value=eval(string)；//|您可以直接使用eval()方法来标识新字符串，并执行arr=[]；//|此字符串中的操作}//| }///-if(this。value=' c') {o text。值=' 0 '；arr=[]；} if(this . value==' d '){ otext . value=otext . value . substr(0，otext . value . length-1)；//删除结束值if (otext。value==' ')每次在otext中{//删除otext中的值后，给otext.value=' 0//otext复数值“0”。} } } }/脚本/正文/html

计算器的“C”功能是清屏；“d”功能是删除一个数字；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。