用HTML实现简易版计算器

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

运行结果如下：

引入的图片：back.png

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

 <div><span id="result"></span></div><table border="1px"  width="200px" height="300px"><tbody align="center"><tr><td width="50px" onclick="leftBracket()">(</td><td width="50px" onclick="rightBracket()">)</td><td width="50px" onclick="ppow()">^</td><td width="50px" onclick="psqrt()">√</td></tr><tr><td onclick="c()">C</td><td onclick="po('%')">%</td><td width="50px" onclick="backspace()"><img src="img/back.png" width="25px"/></td><td onclick="po('÷')">÷</td></tr><tr><td onclick="pn(7)">7</td><td onclick="pn(8)">8</td><td onclick="pn(9)">9</td><td onclick="po('×')">×</td></tr><tr><td onclick="pn(4)">4</td><td onclick="pn(5)">5</td><td onclick="pn(6)">6</td><td onclick="po('-')">-</td></tr><tr><td onclick="pn(1)">1</td><td onclick="pn(2)">2</td><td onclick="pn(3)">3</td><td onclick="po('+')">+</td></tr><tr><td onclick="pn('00')">00</td><td onclick="pn(0)">0</td><td onclick="pn('.')">.</td><td onclick="equals1()">=</td></tr></tbody></table>

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);
}

用HTML实现简易版计算器相关推荐

js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
小学生的简易版计算器
今天,我照常打开C++,开始用switch语句编程序,突然,我想出了做计算器的念头,于是,我就做出了它--超级简易的计算器,下面是代码: #include<bits/stdc++.h> u ...
简易版计算器APP开发
源码资源链接:https://download.csdn.net/download/The_Devil_ICE/86806514 视频教程链接:Java Android实现简易计算器_哔哩哔哩_bil ...
#JAVA# JAVA简易版计算器GUI编程练习
设计一个类似于Windows计算器的application,创建一个Frame,加入两个面板分别显示文本框数字和数字按钮等,采用BoderLayout布局使之上下排布. package Calcual ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金
用链栈实现简易四则运算计算器(php版)
栈是一种限定仅在表尾进行插入和删除操作的线性表.栈的应用有很多,比如常见的递归,计算机表达式求值等.下面我们用栈来实现简易的四则运算计算器. 列一下本文的思路: 实现链栈的数据结构及其操作中缀表达式 ...
利用python实现简易版的贪吃蛇游戏（面向python小白）
前言这篇文章主要给大家介绍了关于如何利用python实现简易版的贪吃蛇游戏的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学 ...
c语言计算器程序代码链栈,【C语言】简易科学计算器源代码(链栈应用)(原创).doc...
[C语言]简易科学计算器源代码(链栈应用)(原创) 用到的是算符优先法的思想,现摘自严蔚敏的数据结构(C语言版)的3.2.5章来详细说明算符优先法的思想: (摘抄结束) 我给出的计算器功能有:支持欧拉 ...
python贪吃蛇最简单代码_利用python实现简易版的贪吃蛇游戏（面向python小白）
引言作为python 小白,总是觉得自己要做好百分之二百的准备,才能开始写程序.以至于常常整天在那看各种语法教程,学了几个月还是只会print('hello world'). 这样做效率太低,正确的 ...

用HTML实现简易版计算器

用HTML实现简易版计算器相关推荐

最新文章

热门文章