基于JavaScript实现简易计算器

本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>计算器</title> <style> .op { margin: 50px auto; width: 300px; height: 300px; border: 1px solid orange; background-color: lightskyblue; border-radius: 50px; } input { width: 210px; height: 30px; border-radius: 5px; } button { width: 30px; height: 30px; border-radius: 10px; } </style></head><body><div class=”op”> <h2 align=”center”>计算器</h2> <form name=”calculator”> <table align=”center”> <tr> <td>num1:</td> <td><input type=”text” name=”num1″></td> </tr> <tr> <td>num2:</td> <td><input type=”text” name=”num2″></td> </tr> <tr> <td colspan=”2″>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type=”button”>+</button> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type=”button”>-</button> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type=”button”>*</button> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type=”button”>/</button> </td> </tr> <tr> <td>结果：</td> <td><input type=”text” name=”result” disabled></td> </tr> </table> </form></div><script> //得到标签名下的所有元素对象，返回一个数组 let buttonArr = document.getElementsByTagName(“button”); for (let but of buttonArr) { but.addEventListener(’click’, function () { let operator = this.innerHTML; count(operator); }); } function count(operator) { //得到form为calculator中name为num1的输入值 let num1 = parseFloat(document.calculator.num1.value); let num2 = parseFloat(document.calculator.num2.value); let result = ’’; switch (operator) { case ’+’: result = num1 + num2; break; case ’-’: result = num1 – num2; break; case ’*’: result = num1 * num2; break; case ’/’: if (num2 == 0) { alert(“除数不能为零”); return; } result = num1 / num2; break; }//将结果赋值于属性名name为result的input框 document.calculator.result.value = result; }</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

如何用js做一个简易计算器？

js做一个简易计算器具体如下：

<html>
<head>
<title>js运算</title>
<boby>
<table>
<tr>
<td>第一个数</td>
<td><input type=”text” id=”onesum”></td>
</tr>
<tr>
<td>运算符号</td>
<td><input type=”text” id=”fh”></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type=”text” id=”twosum”></td>
</tr>
<tr>
<td>计算结果</td>
<td><input type=”text” id=”sum”></td>
</tr>
<tr>
<td colspan=”2″><input type=”button” value=” 计算 ” onclick=”js()”></td>
</tr>
<table>
<script>
function js(){
var num1=document.getElementById(“onesum”).value;
var num2=document.getElementById(“twosum”).value;
var fh=document.getElementById(“fh”).value;
var sum=0;
nu
m1=Number(num1);
num2=Number(num2);
if(fh==’+’)
{
sum=num1+num2;
}
else if(fh==’-‘)
{
sum=num1-num2;
}else if(fh==’*’)
{
sum=num1*num2;
}else if(fh==’/’)
{
sum=num1/num2;
}
//alert(sum);
document.getElementById(“sum”).value=sum;
}
</script>
</boby>
</html>

JavaScript 教程 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

如何用javascript做一个计算器

首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码<table id=”calculater” onClick=”calculater()”><tr><td id=”display” colspan=”5″>0</td></tr><tr><td class=”numberkey” >1</td><td class=”numberkey” >2</td><td class=”numberkey” >3</td><td class=”numberkey” >+</td><td class=”numberkey” id=”deletesign”>c</td> </tr><tr><td class=”numberkey” >4</td><td class=”numberkey” >5</td><td class=”numberkey” >6</td><td class=”numberkey” >-</td><td rowspan=”3″ id=”equality” onclick=”resultscalcaulte()”>=</td> </tr><tr><td class=”numberkey” >7</td><td class=”numberkey” >8</td><td class=”numberkey” >7</td><td class=”numberkey” >*</td></tr><tr ><td class=”numberkey” >+/-</td><td class=”numberkey” >0</td><td class=”numberkey” >.</td><td class=”numberkey” >/</td> </tr>上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了colspan=”5″ 是合并五列的意思，表示这个单元格要占五列rowspan=”3″是合并三行的意思，表示这个单元格要占三行效果如下，这样一个简单的架构就完成了接下来就是css的设计，下面是代码*{padding:0;margin:1px;}#calculater{margin: auto;margin-top: 30px;border: solid 6px #2371D3;border-spacing: 0px;}#display{width: 100%;height: 30px;border-bottom: solid 4px #2371D3;font-weight: bold;color: #193D83;font-family: 黑体;padding-left: 2px;}.numberkey{cursor: pointer;width: 40px;height: 30px;border: solid 1px #FFFFFF;background: #2371D3;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体;}#equality{cursor: pointer;width: 40px; height: 100%;background: #2371D3;border: solid 1px #FFFFFF;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体; }.numberkey:hover{background: #EA6F30; }#equality:hover{background: #EA6F30; }以上是css代码，比较简单border-spacing: 0px;这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。cursor: pointer;这里代码的意义是：使鼠标放在上面时变成一个手的标志效果如下接下来是javascript的代码，按照思路来一点点写首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号所以我们在table标签里加上onClick=”calculater()”，添加一个点击事件然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。

如何使用javascript编写一个计算器

首先，由于JS的存在数值的精度误差问题：
0.1+0.2 //0.300000000000000040.3-0.1 //0.19999999999999998
所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数
//浮点数加法运算function floatAdd(arg1,arg2){var r1,r2,m;try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}m=Math.pow(10,Math.max(r1,r2));return (arg1*m+arg2*m)/m}
//浮点数减法运算function floatSub(arg1,arg2){ var r1,r2,m,n; try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0} try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2)); //动态控制精度长度 n=(r1>=r2)?r1:r2; return ((arg1*m-arg2*m)/m).toFixed(n);}
//浮点数乘法运算function floatMul(arg1,arg2){ var m=0,s1=arg1.toString(),s2=arg2.toString(); try{m+=s1.split(“.”)[1].length}catch(e){} try{m+=s2.split(“.”)[1].length}catch(e){} return Number(s1.replace(“.”,””))*Number(s2.replace(“.”,””))/Math.pow(10,m)}
//浮点数除法运算function floatDiv(arg1,arg2) { var t1 = 0, t2 = 0, r1, r2; try {t1 = arg1.toString().split(“.”)[1].length} catch (e) {} try {t2 = arg2.toString().split(“.”)[1].length} catch (e) {} with (Math) { r1 = Number(arg1.toString().replace(“.”, “”)); r2 = Number(arg2.toString().replace(“.”, “”)); return (r1 / r2) * pow(10, t2 – t1); }}
以下是详细的计算器代码： HTML5
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><title>简单计算器</title><link href=”main.css” rel=”stylesheet”></head><body><div id=”calculator”><div id=”calculator_container”><h3>计算器</h3><table id=”calculator_table”><tbody><tr><td colspan=”5″><input type=”text” id=”resultIpt” readonly=”readonly” value=”” size=”17″ maxlength=”17″ style=”width:294px;color: black”></td></tr><tr><td><input type=”button” value=”←” class=”btn_color1 btn_operation”></td><td><input type=”button” value=”全清” class=”btn_color1 btn_operation”></td><td><input type=”button” value=”清屏” class=”btn_color1″></td><td><input type=”button” value=”﹢/﹣” class=”btn_color2 btn_operation”></td><td><input type=”button” value=”1/×” class=”btn_color2 btn_operation”></td></tr><tr><td><input type=”button” value=”7″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”8″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”9″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”÷” class=”btn_color4 btn_operation”></td><td><input type=”button” value=”％” class=”btn_color2 btn_operation”></td></tr><tr><td><input type=”button” value=”4″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”5″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”6″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”×” class=”btn_color4 btn_operation”></td><td><input type=”button” value=”√” class=”btn_color2 btn_operation”></td></tr><tr><td><input type=”button” value=”1″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”2″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”3″ class=”btn_color3 btn_number”></td><td><input type=”button” value=”－” class=”btn_color4 btn_operation”></td><td rowspan=”2″><input type=”button” value=”＝” class=”btn_color2″ style=”height: 82px” id=”simpleEqu”></td></tr><tr><td colspan=”2″><input type=”button” value=”0″ class=”btn_color3 btn_number” style=”width:112px”></td><td><input type=”button” value=”.” class=”btn_color3 btn_number” ></td><td><input type=”button” value=”＋” class=”btn_color4 btn_operation”></td></tr></tbody></table></div></div><script type=”text/javascript” src=”calculator.js”></script></body></html>

CSS3
* {margin: 0;padding: 0;}#calculator{position: relative;margin: 50px auto;width: 350px;height: 400px;border: 1px solid gray;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 2px 2px 4px gray;-moz-box-shadow: 2px 2px 4px gray;box-shadow: 2px 2px 4px gray;behavior:url(“ie-css3.htc”); /*IE8-*/}#calculator_table{position: relative;margin: 10px auto;border-collapse:separate;border-spacing:10px 20px;}h3{position: relative;width: 60px;height: 30px;margin: 0 auto;}#calculator_table td{width: 50px;height: 30px;border: 1px solid gray;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;behavior:url(“ie-css3.htc”); /*IE8-*/}#calculator_table td input{font-size: 16px;border: none;width: 50px;height: 30px;color: white;}input.btn_color1{background-color: orange;}input.btn_color2{background-color: #133645;}input.btn_color3{background-color: #59807d;}input.btn_color4{background-color: seagreen;}input:active{-webkit-box-shadow: 3px 3px 3px gray;-moz-box-shadow: 3px 3px 3px gray;box-shadow: 3px 3px 3px gray;behavior:url(“ie-css3.htc”); /*IE8-*/}
JS
window.onload=function() {var resultIpt = document.getElementById(“resultIpt”); //获取输出文本框var btns_number = document.getElementsByClassName(“btn_number”); //获取数字输入按钮var btns_operation = document.getElementsByClassName(“btn_operation”); //获取操作按钮var simpleEqu = document.getElementById(“simpleEqu”); //获取”=”按钮var temp = “”;var num1= 0,num2=0;//获取第一个数for(var i=0;i<btns_number.length;i++){btns_number[i].onclick=function (){temp += this.value;resultIpt.value = temp;};}//对获取到的数进行操作for(var j=0;j<btns_operation.length;j++) {btns_operation[j].onclick = function () {num1=parseFloat(resultIpt.value);oper = this.value;if(oper==”1/×”){num1 = Math.pow(num1,-1); //取倒数resultIpt.value = num1.toString();}else if(oper==”﹢/﹣”){ //取相反数num1 = -num1;resultIpt.value = num1.toString();}else if(oper==”√”){ //取平方根num1 =Math.sqrt(num1);resultIpt.value = num1.toString();}else if(oper==”←”){ //删除个位resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length – 1);}else if(oper==”全清”){ //清除数字resultIpt.value = “”;}else{ //oper==”＋” “－” “×” “÷” “％”时，继续输入第二数字temp = “”;resultIpt.value = temp;}}}//输出结果simpleEqu.onclick=function(){num2=parseFloat(temp); //取得第二个数字calculate(num1, num2, oper);resultIpt.value = result.toString();}};//定义一个计算函数function calculate(num1, num2, oper) {switch (oper) {case “＋”:result=floatAdd(num1, num2); //求和break;case “－”:result=floatSub(num1, num2); //求差break;case “×”:result=floatMul(num1, num2); //求积break;case “÷”:result=floatDiv(num1, num2); //求商break;case “％”:result=num1%num2; //求余数break;}}//精确计算//浮点数加法运算function floatAdd(arg1,arg2){var r1,r2,m;try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}m=Math.pow(10,Math.max(r1,r2));return (arg1*m+arg2*m)/m}//浮点数减法运算function floatSub(arg1,arg2){var r1,r2,m,n;try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}m=Math.pow(10,Math.max(r1,r2));//动态控制精度长度n=(r1>=r2)?r1:r2;return ((arg1*m-arg2*m)/m).toFixed(n);}//浮点数乘法运算function floatMul(arg1,arg2){var m=0,s1=arg1.toString(),s2=arg2.toString();try{m+=s1.split(“.”)[1].length}catch(e){}try{m+=s2.split(“.”)[1].length}catch(e){}return Number(s1.replace(“.”,””))*Number(s2.replace(“.”,””))/Math.pow(10,m)}//浮点数除法运算function floatDiv(arg1,arg2) {var t1 = 0, t2 = 0, r1, r2;try {t1 = arg1.toString().split(“.”)[1].length} catch (e) {}try {t2 = arg2.toString().split(“.”)[1].length} catch (e) {}with (Math) {r1 = Number(arg1.toString().replace(“.”, “”));r2 = Number(arg2.toString().replace(“.”, “”));return (r1 / r2) * pow(10, t2 – t1);}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表优客号立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.youkehao.org.cn/article/64860.html

如若内容造成侵权/违法违规/事实不符，请联系优客号进行投诉反馈，一经查实，立即删除！