位置: IT常识 - 正文

用HTML实现简易版计算器(简易html代码)

发布时间：2024-01-17

用HTML实现简易版计算器

推荐整理分享用HTML实现简易版计算器(简易html代码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:如何用html,html简单,简易html代码,用html语言制作简单的网页,html简单例子,html运用,html简单例子,用html语言制作简单的网页,内容如对您有帮助，希望把文章链接给更多的朋友！

计算器功能：实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。

运行结果如下：

引入的图片：back.png

HTML部分：用table表格添加计算器的按键，给每个按键设置一个相应的单击事件，点击一个按键后在div块里显示相应的内容。

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" <= c && c <= "9" || c == "%"){po("×");}result.innerHTML += "(";}function rightBracket(){isEqual();result.innerHTML += ")"}function ppow(){isEqual();result.innerHTML += "^"}function psqrt(){isEqual();var r = result.innerHTML;var c = r.charAt(r.length - 1);if ("0" <= c && c <= "9" || c == "%"){po("×");}result.innerHTML += "√";}function c(){result.innerHTML = "";}function backspace(){var r = result.innerHTML;result.innerHTML = r.substr(0,r.length - 1);isEqual();}function equals1(){equal = true;var r = result.innerHTML;//将特殊字符进行替换r = r.replace(/×/g,"*");r = r.replace(/÷/g,"/");r = r.replace(/%/g,"*0.01");try{ r = pow(r); r = sqrt(r);result.innerHTML=eval(r);}catch(e){result.innerHTML="表达式不正确";}}function pow(r){var arr = r.split("^");if (arr.length == 1){return r;}var leftstr = leftOperation(arr[0]);var rightstr = rightOperation(arr[1]);var num = "Math.pow(" + leftstr + "," + rightstr + ")";var leftr = arr[0].substring(0,arr[0].length - leftstr.length);var rightr = arr[1].substring(rightstr.length,arr[1].length);var r = leftr + num + rightr;return pow(r);}function sqrt(r){if (r.indexOf("√") == -1){return r;}var arr = r.split("√");var rightstr = rightOperation(arr[1]);var num = "Math.sqrt(" + rightstr + ")";var leftr = arr[0];var rightr = arr[1].substring(rightstr.length,arr[1].length);var r =leftr + num + rightr;return sqrt(r);}function leftOperation(r){var leftBracket = 0;var rightBracket = 0;var i;for (i = r.length - 1; i >=0; i--){var c = r.charAt(i);if (c == ")"){rightBracket++;} else if (leftBracket == rightBracket && c >="0" && c <= "9"){break;} else if (c == "("){leftBracket++;}}return r.substring(i);}function rightOperation(r){var leftBracket = 0;var rightBracket = 0;var i;for (i = 0; i < r.length; i++){var c = r.charAt(i);if (c == "("){leftBracket++;} else if (leftBracket == rightBracket && c >="0" && c <= "9"){break;} else if (c == ")"){rightBracket++;}}return r.substring(0,i+1);}