您的当前位置:首页正文

JavaScript实现一个简易的计算器实例代码

2023-12-08 来源:站点网
导读js做一个简易计算器具体如下:<html><head><title>js运算</title><boby><table><tr><td>第一个数</td><td><input type="text" id="onesum"></td></tr><tr><td>运算符号</td

有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预,最终的计算从input输入框中获取value值,然后把这个value值作为参数传递给eval,并使用try catch(exception)来捕获并处理异常。

3.通过事件代理绑定事件

因为每个button都需要有一个点击事件,如果一个一个去绑定,会导致代码十分的不简洁,而且效率也非常低。这时就可以考虑使用事件代理,由于事件冒泡的原理,我们可以把点击事件绑定在table上,然后通过判断事件发生的具体对象来做出不同的反应,调用不同的函数。

4.其他效果

可以根据自己的设计思路,添加其他的效果。我主要是添加了一个错误提示的动画:如果eval函数抛出异常,则从上面缓慢滑下一个图片,并且通过setTimeout来设置了停留的时间。

5.注意细节

在设置enter键按下获得结果的时候,keydown事件对象应该为整个table,并且应该阻止enter键的默认行为获取元素样式时需要写一个兼容函数,因为obj.style.attr只能获取行间样式,要像获取外部样式需要用getComputedStyle(obj,false)[attr]或兼容IE的obj.currentStyle[attr]。

小编还为您整理了以下内容,可能对您也有帮助:

如何用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,以及更多的应用。

用js代码做一个简易计算器

function test(){

     var txt1 = document.getElementById("txt1"),

         txt2 = document.getElementById("txt2"),

         txt3 = document.getElementById("txt3"),

         opt  = document.getElementById("sel");

     txt3.value =  eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串,并执行其中的的js代码

}

<input type="text" id="txt1" />

<select id="sel">

     <option value="+">+</option>

     <option value="-">-</option>

     <option value="*">*</option>

     <option value="/">/</option>

</select>

<input type="text" id="txt2" />

=

<input type="text" id="txt3" />

<input type="button" id="btn" value="计算" onclick="test()"/>

用javascript做一个简单的计算器?

运算符号选项形式,可以避免输入错误:<html>
<body>
第一个数<input type="text" value="" width="100" id="num1"><br>
运算符号<select id="fh">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select><br>
第二个数<input type="text" value="" width="100" id="num2"><br>
运算结果<input type="text" value="" width="100" id="jg" ><br><br>
<input type="button" value=" 计算 " onclick="js()">
<script>
function js(){
var num1=document.getElementById("num1").value
var num2=document.getElementById("num2").value
var fh=document.getElementById("fh").value
var jg=document.getElementById("jg")
if(!isNaN(num1) && !isNaN(num2)){
if(fh=="+")jg.value=Number(num1)+Number(num2)
if(fh=="-")jg.value=Number(num1)-Number(num2)
if(fh=="*")jg.value=Number(num1)*Number(num2)
if(fh=="/")jg.value=Number(num1)/Number(num2)
}
}
</script>
</body>
</html>

用javascript做一个简单的计算器?

运算符号选项形式,可以避免输入错误:<html>
<body>
第一个数<input type="text" value="" width="100" id="num1"><br>
运算符号<select id="fh">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select><br>
第二个数<input type="text" value="" width="100" id="num2"><br>
运算结果<input type="text" value="" width="100" id="jg" ><br><br>
<input type="button" value=" 计算 " onclick="js()">
<script>
function js(){
var num1=document.getElementById("num1").value
var num2=document.getElementById("num2").value
var fh=document.getElementById("fh").value
var jg=document.getElementById("jg")
if(!isNaN(num1) && !isNaN(num2)){
if(fh=="+")jg.value=Number(num1)+Number(num2)
if(fh=="-")jg.value=Number(num1)-Number(num2)
if(fh=="*")jg.value=Number(num1)*Number(num2)
if(fh=="/")jg.value=Number(num1)/Number(num2)
}
}
</script>
</body>
</html>

简易的加减乘除的计算器代码js

//html
<input type="text" id="num1" value="" />
    <select id="mySelect">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="num2" value="" />
    <input type="button" id="jisuan" value="计算" />
//js
<script>
    var oTxt1 = document.getElementById('num1');
    var oTxt2 = document.getElementById('num2');
    var oSelect = document.getElementById('mySelect');
    var oBtn = document.getElementById('jisuan');
    oBtn.onclick=function(){
        switch(oSelect.value){
            case '+':
                alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
                break;
            case '-':
                alert(parseInt(oTxt1.value)-parseInt(oTxt2.value));
                break;
            case '*':
                alert(parseInt(oTxt1.value)*parseInt(oTxt2.value));
                break;
            case '/':
                if(parseInt(oTxt2.value) !== 0){
                    alert(parseInt(oTxt1.value)/parseInt(oTxt2.value));
                }else{
                    alert('除数不能为0');
                }
                
                break;
            default:
                alert('Bug!!!');
        }
    }
</script>

简易的加减乘除的计算器代码js

//html
<input type="text" id="num1" value="" />
    <select id="mySelect">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="num2" value="" />
    <input type="button" id="jisuan" value="计算" />
//js
<script>
    var oTxt1 = document.getElementById('num1');
    var oTxt2 = document.getElementById('num2');
    var oSelect = document.getElementById('mySelect');
    var oBtn = document.getElementById('jisuan');
    oBtn.onclick=function(){
        switch(oSelect.value){
            case '+':
                alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
                break;
            case '-':
                alert(parseInt(oTxt1.value)-parseInt(oTxt2.value));
                break;
            case '*':
                alert(parseInt(oTxt1.value)*parseInt(oTxt2.value));
                break;
            case '/':
                if(parseInt(oTxt2.value) !== 0){
                    alert(parseInt(oTxt1.value)/parseInt(oTxt2.value));
                }else{
                    alert('除数不能为0');
                }
                
                break;
            default:
                alert('Bug!!!');
        }
    }
</script>

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

首先,由于JS的存在数值的精度误差问题:

0.1+0.2   //0.30000000000000004
0.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);
}
}

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

首先,由于JS的存在数值的精度误差问题:

0.1+0.2   //0.30000000000000004
0.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);
}
}

谁能用js帮我写这样一个简单的计算器??

<div>

<input type="text" name="num1" id="num1"/>

<select name="myoperator" id="myoperator">

<option value="+" selected="selected">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

<input type="text" name="num2" id="num2"/>

<input type="button" name="calc" value="等于" onclick="oper()"/>

<input type="text" name="myresult" id="myresult"/>

</div>

<script type="text/javascript">

function oper()

{

var n1 = parseInt(document.getElementById("num1").value);

var n2 = parseInt(document.getElementById("num2").value);

//alert(n1);

var otype = document.getElementById("myoperator").value;

if(null == otype || "" == otype)

{

alert("ERROR");

return;

}

var res = document.getElementById("myresult");

if("+" == otype)

{

res.value = n1+n2;

}

else if("-" == otype)

{

res.value = n1-n2;

}

else if("*" == otype)

{

res.value = n1*n2;

}

else if("/" == otype)

{

res.value = n1/n2;

}

}

</script>

本地测试已经通过,这是一个简单实现,没有加验证(判断非数字和字母为0等异常),希望对你有用。

求高手帮忙,用javascript脚本语言编写个最简单的计算器,如图所示

Calculator.java:

import java.awt.*;

import java.awt.event.*;

import java.lang.*;

import java.applet.*;

public class Calculator extends Applet implements ActionListener{

Panel buttonPanel;

TextField tf; //用于显示输入的数字的文本框

Button b0,b1,b2,b3,b4,b5,b6,b7,b8,b9,bDot,bPlus,bSub,bDiv,bMulti,bEqual; //按键

String onDisplay=""; //显示在文本框中的字符串

boolean isDotPressed=false; //按键'.'是否被按下

float operand; //通过按键输入的数

float operand1,operand2;//operand1和operand2为计算用的操作数

char operator; //计录所用的操作符

float result; //计算结果

int times=1; //小数点后有几位的10次方幂

public void init(){

setLayout(new BorderLayout(5,5));

tf=new TextField(30);

add(tf,BorderLayout.NORTH);

buttonPanel=new Panel();

buttonPanel.setLayout(new GridLayout(4,4,5,5));

add(buttonPanel,BorderLayout.CENTER);

//下面依次把按钮添加上去

b1=new Button("1");

buttonPanel.add(b1);

b1.addActionListener(this);

b1.setActionCommand("1");

b2=new Button("2");

buttonPanel.add(b2);

b2.addActionListener(this);

b2.setActionCommand("2");

b3=new Button("3");

buttonPanel.add(b3);

b3.addActionListener(this);

b3.setActionCommand("3");

bPlus=new Button("+");

buttonPanel.add(bPlus);

bPlus.addActionListener(this);

bPlus.setActionCommand("+");

b4=new Button("4");

buttonPanel.add(b4);

b4.addActionListener(this);

b4.setActionCommand("4");

b5=new Button("5");

buttonPanel.add(b5);

b5.addActionListener(this);

b5.setActionCommand("5");

b6=new Button("6");

buttonPanel.add(b6);

b6.addActionListener(this);

b6.setActionCommand("6");

bSub=new Button("-");

buttonPanel.add(bSub);

bSub.addActionListener(this);

bSub.setActionCommand("-");

b7=new Button("7");

buttonPanel.add(b7);

b7.addActionListener(this);

b7.setActionCommand("7");

b8=new Button("8");

buttonPanel.add(b8);

b8.addActionListener(this);

b8.setActionCommand("8");

b9=new Button("9");

buttonPanel.add(b9);

b9.addActionListener(this);

b9.setActionCommand("9");

bMulti=new Button("*");

buttonPanel.add(bMulti);

bMulti.addActionListener(this);

bMulti.setActionCommand("*");

b0=new Button("0");

buttonPanel.add(b0);

b0.addActionListener(this);

b0.setActionCommand("0");

bDot=new Button(".");

buttonPanel.add(bDot);

bDot.addActionListener(this);

bDot.setActionCommand(".");

bEqual=new Button("=");

buttonPanel.add(bEqual);

bEqual.addActionListener(this);

bEqual.setActionCommand("=");

bDiv=new Button("/");

buttonPanel.add(bDiv);

bDiv.addActionListener(this);

bDiv.setActionCommand("/");

}

public void actionPerformed(ActionEvent e){

String str=e.getActionCommand();

char b=str.charAt(0);

switch(b){

case '0':

case '1':

case '2':

case '3':

case '4':

case '5':

case '6':

case '7':

case '8':

case '9': onDisplay+=b;

operand=operand*10+Integer.parseInt(str);

if(isDotPressed) times*=10;

tf.setText(onDisplay);

break;

case '.': onDisplay+=b;

isDotPressed=true;

tf.setText(onDisplay);

break;

case '+':

case '-':

case '*':

case '/': operator=b;

operand1=operand/times;

System.out.println(operand1);

onDisplay="";

times=1;

isDotPressed=false;

operand=0;

break;

case '=': operand2=operand/times;

System.out.println(operand2);

switch(operator){

case '+': result=operand1+operand2;break;

case '-': result=operand1-operand2;break;

case '*': result=operand1*operand2;break;

case '/': result=operand1/operand2;break;

}

tf.setText(float.toString(result));

onDisplay="";

times=1;

isDotPressed=false;

operand=0;

break;

}

}

}

Calculator.html:

<html>

<applet code="Calculator.class" width=250 height=250>

</applet>

</html>

站点网还为您提供以下相关内容希望对您有帮助:

如何用JS创建一个简单的网页计算器

doctype html&gt; 计算器 .panel{ border:4px solid #ddd; width:192px; margin:100px auto; } .panel p,.panel input{ font-family:"微软雅黑"; font-size:20px; ...

js计算器代码怎么写,通过弹窗显示

1、js计算器代码编写html,实现计算器页面视图效果。2、js计算器代码编写,实现点击输入数字和符号输出结果。3、js计算器代码创建click1函数,判断flag的值,如果是true就定位到第一个输入框,如果是false就定位到第二个输入...

用js代码做一个简易计算器

function test(){ var txt1 = document.getElementById("txt1"), txt2 = document.getElementById("txt2"), txt3 = document.getElementById("txt3"), opt = document.getElementById("sel"); ...

简易的加减乘除的计算器代码js

/"&gt;/ //js var oTxt1 = document.getElementById('num1'); var oTxt2 = document.getElementById('num2'); var oSelect = document.getElementById('mySelect'); var oBtn = document...

用javascript做一个简单的计算器?

第一个数 运算符号 加 减 乘 除 第二个数 运算结果

使用JavaScript 的知识做一个简单的计算器

&lt;TITLE&gt;计算器&lt;/TITLE&gt; &lt;STYLE type="text/css"&gt; .textBaroder /*细边框的文本输入框*/ { border-width:1px;border-style:solid } &lt;/STYLE&gt; &lt;SCRIPT language="javascript"&gt; function compute(op){ var num1,...

Javascript实现计算器(简单)结果出不来。高手帮帮小菜吧

计算器 function compute(op){ var num1,num2;num1=parseFloat(document.myform.num1.value);num2=parseFloat(document.myform.num2.value);if(op=="+")document.myform.result.value=num1+num2;if(op=="-")...

javascript简易计算器

;if(num!=0 &amp;&amp; quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 switch(calcul){ //判断要输入状态 case 1:result=num+numshow;break; //计算"+"case 2:result=num-numshow;break; //计算"-"...

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

js做一个简易计算器具体如下: js运算 &lt;boby&gt; 第一个数 运算符号 第二个数 计算结果 &lt;

求助:用JavaScript完成一个简单的计算器

求助:用JavaScript完成一个简单的计算器 不要按钮形式的,只要在两个文本框分别输入两个数,通过中间的列表框选择+-/*,点击“=”按钮,计算结果.谢谢!!!不要其他功能,只要最基本的+-*/四个功能即可.谢谢!... 不要按钮形式的,...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top