【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码） |
您所在的位置：网站首页 › 换一个算式 › 【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码） |
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
|
1.最终效果展示
实现了如上图所示的一般计算器的功能包括 （1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思） （2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思 （3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果 （4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深 3.代码展示一共有三份，html，css，javaScript各一份 链接：https://pan.baidu.com/s/1c-8_9y7oKMO6U-p27dhCww 提取码：1234 在index.html中代码如下 计算器 计算器 清空 退格 +/- / 7 8 9 * 4 5 6 - 1 2 3 + % 0 . =index.css中的代码 /*表格样式设置*/ table{ border: 2px solid cornflowerblue;/*必须要同时设置边框的粗细，虚实和颜色，不然无法显示出来*/ margin:100px auto; border-radius:7px;/*把边框的角设为有一定弧度的圆角*/ border-collapse:separate;/*separate表示单元格的边框分开显示，如果时collapse则表示单元格边框合并为一个单一的边框，这也是默认设置*/ border-spacing:10px;/*设置单元格之间的间隔，有间隔看起来不会太拥挤*/ } /*结果单元格样式设置*/ #result{ width:300px; height:60px; border:1px solid cornflowerblue; text-align:right;/*计算结果的文本是右对齐的*/ padding:10px;/*设置内边距*/ font-size:20px; } /*作为按钮的单元格样式设置*/ .buttons{ width:100px; height:50px; border:1px solid cornflowerblue; text-align:center; border-radius:7px; }index.js中的代码： let table=document.querySelector("#mytable")//获取表格元素 let resultStr=table.rows[0].cells[0]//获取表格的第一个单元格，就是我们需要显示计算结果的单元格 //如果想在javaScript中获取触发了onclick时间的元素，可以使用this关键词 //添加字符(数字) function addNumChar(element){ resultStr.innerText+=element.innerText } //添加运算符 function addOperationChar(element){ let lastchar=resultStr.innerHTML.charAt(resultStr.innerHTML.length-1)//获取结果字符串最后一个字符 if(lastchar=="+" || lastchar=="-" || lastchar=="*" || lastchar=="/" || lastchar=="%"){//运算符不能一次重复使用 if(element.innerText!="."){//运算符后面不能接小数点 resultStr.innerText=resultStr.innerText.replace(lastchar,element.innerText,resultStr.innerHTML.length-1)//把最后一个字符替换为当前所切换的运算符 } }else if(lastchar=="."&&element.innerText=="."){ //小数点不能有多个，所以当最后一个字符为小数点当前字符还是小数点，则什么操作也不做，但小数点后面可以添加运算符 }else{ resultStr.innerText+=element.innerText } } //清空 function clearAll(){ resultStr.innerText="" } //退格 function backSpace(){ let lastchar=resultStr.innerText.charAt(resultStr.innerHTML.length-1)//获取最后一个字符 resultStr.innerText=resultStr.innerText.replace(lastchar,"",resultStr.innerHTML.length-1) } //改变正负号 function pluMinChange(){ //函数Number用于把其他类型值转为数字，但当其中不是数字时比如式子时，会返回NaN，而函数isNaN()用来判断是否为NaN if(!isNaN(Number(resultStr.innerText))){ resultStr.innerText=-Number(resultStr.innerText) } } //求计算式的值，并更新结果区 function solveOut(){ resultStr.innerText=eval(resultStr.innerText)//函数eval()可以计算字符串中的表达式 if(isNaN(Number(resultStr.innerText))){resultStr.innerText="错误"} } |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |