用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);
-
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfbcai
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01