计算器功能:实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。
运行结果如下:
引入的图片:back.png
HTML部分:用table表格添加计算器的按键,给每个按键设置一个相应的单击事件,点击一个按键后在div块里显示相应的内容。
()^√C%÷789×456-123+000.=CSS部分:通过绝对定位将所需显示的内容定位到div块右下角。注意:绝对定位是根据有定位的第一个先祖标签进行定位的,但div块并不需要移动位置,因此这里给div添加相对定位;div块边框需要与table边框对齐,table的总宽度为200px,div块的左右边框占2px,所以width需要设置为198px。
div { width: 198px; height: 50px; border: 1px solid black; border-bottom: none; position: relative; } #result { position: absolute; right: 5px; bottom: 5px; }
JavaScript部分:通过innerTHML属性添加 / 获取所需计算的内容,再调用eval方法将获取到的内容转换为js代码进行计算。
"%":计算器中的"%"一般为百分数,在进行运算时需要将"%",换为"*0.01"进行运算。
回退:通过innerTHML属性得到字符串,将最后的字符去掉,再重新赋值给innerTHML属性。
幂运算:用split方法将"^"前后分开,再查找进行此次幂运算的表达式,如数值、带括号的表达式等等。前半部分从字符串最后往前找,而后半部分则从前往后找,将查找匹配表达式的过程封装到leftOperation(r)方法和rightOperation(r)方法中,找到这些匹配的表达式后将此表达式返回给变量leftstr和rightstr,将要参与幂运算的leftstr和rightstr跟Math.pow方法进行幂运算的拼接即拼接成字符串:"Math.pow(leftstr, rightstr)"的格式赋值给num,通过substring方法将"^"左右部分的字符串去掉进行幂运算的相关部分后再将num拼接到原"^"位置。"^"操作符可能不止一个,用递归调用的方式在pow方法中再调用pow方法直到没有"^"为止。
根式运算:对根号后面的数或表达式进行根式运算,用indexof方法判断有无根号,如果有根号通过split方法将根号前后的数或表达式分开,将根号后面的数或表达式通过rightOperation(r)方法单独取出赋值给rightstr,将此rightstr跟Math.sqrt方法进行字符串拼接即拼接成:"Math.sqrt(rightstr)"的格式后赋值给num,最后通过substring方法将根号后面部分的字符串去掉进行根式运算的相关部分后再将num拼接到原根号位置。同幂运算一样,根号也可能有多个所以要用到递归。
在数学中括号、根号等前面的乘号可以省略,所以要在输入左括号、根号时做判断,判断前面的是数字还是运算符,如果是数字或"%",则在输入左括号、根号前加一个乘号,如果是运算符则直接输入。
//div块元素var result;//是否进行了运算var equal = false;window.onload = function(){result = document.getElementById("result");result.innerHTML = "";}//如果进行了运算,下次输入数前进行清零function isEqual(){if (equal){c();equal = false;}}function pn(n){isEqual();result.innerHTML += n;}function po(o){result.innerHTML += o;equal = false;}function leftBracket(){isEqual();var r = result.innerHTML;var c = r.charAt(r.length - 1);if ("0"