js计算器完整代码（js计算器代码怎么让数字不消失）

本篇文章给大家谈谈js计算器完整代码，以及js计算器代码怎么让数字不消失对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、用js代码做一个简易计算器
• 2、如何使用javascript编写一个计算器
• 3、js简易计算器代码
• 4、JS实现简单的计算器功能
• 5、简易计算器js代码
• 6、简易的加减乘除的计算器代码js

用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编写一个计算器

首先，由于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

tdinput type="button" value="←"       class="btn_color1 btn_operation"/td

tdinput type="button" value="全清"     class="btn_color1 btn_operation"/td

tdinput type="button" value="清屏"     class="btn_color1"/td

tdinput type="button" value="﹢/﹣"    class="btn_color2 btn_operation"/td

tdinput type="button" value="1/×"     class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"  value="7"     class="btn_color3 btn_number"/td

tdinput type="button"  value="8"     class="btn_color3 btn_number"/td

tdinput type="button"  value="9"     class="btn_color3 btn_number"/td

tdinput type="button"  value="÷"    class="btn_color4 btn_operation"/td

tdinput type="button"  value="％"    class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"   value="4"   class="btn_color3 btn_number"/td

tdinput type="button"   value="5"   class="btn_color3 btn_number"/td

tdinput type="button"   value="6"   class="btn_color3 btn_number"/td

tdinput type="button"   value="×"  class="btn_color4 btn_operation"/td

tdinput type="button"   value="√"  class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"  value="1"   class="btn_color3 btn_number"/td

tdinput type="button"  value="2"   class="btn_color3 btn_number"/td

tdinput type="button"  value="3"   class="btn_color3 btn_number"/td

tdinput 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

tdinput type="button"  value="."   class="btn_color3 btn_number" /td

tdinput 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;ibtns_number.length;i++){

btns_number[i].onclick=function (){

temp += this.value;

resultIpt.value = temp;

};

}

//对获取到的数进行操作

for(var j=0;jbtns_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简易计算器代码

1. html是从上往下逐行执行的，当执行到“var resultValue=document.getElementById("result").value;

”时id为result的页面元素还没有创建，所以出错。应该把这句放在getNum函数里面

2. getNum函数应该这样写

function getNum(num)

{

var result = document.getElementById("result");

result.value += num;

}

3. 双引号里面应为单引号

onclick="getNum(‘9’)"

JS实现简单的计算器功能

!doctype html

html

    head

        meta charset="utf-8"

        title无标题文档/title

        style

            table{

                border-collapse:separate;

                border-spacing: 8px;

                width: 800px;

            }

            table,td{

                border:1px dashed black;

                padding:1px; 

            }

        /style

        script language="javascript"

            function add()

            {

                var n1=parseInt(document.getElementById('n1').value);

                var n2=parseInt(document.getElementById('n2').value);

                var n3=n1+n2;

                document.getElementById('n3').value=n3;

            }

            function minx()

            {

                var n1=parseInt(document.getElementById('n1').value); 

                var n2=parseInt(document.getElementById('n2').value);

                var n3=n1-n2;

                document.getElementById('n3').value=n3;

            }

            function plus()

            {

                var n1=parseInt(document.getElementById('n1').value);

                var n2=parseInt(document.getElementById('n2').value);

                var n3=n1*n2;

                document.getElementById('n3').value=n3;

            }

            function divd()

            {

                var n1=parseInt(document.getElementById('n1').value);

                var n2=parseInt(document.getElementById('n2').value);

                var n3=n1/n2;

                document.getElementById('n3').value=n3;

            }

        /script

    /head

    body

        table

            tr

                td colspan="4"

                    第一个数:

                    input type="text" id="n1" size="4" maxlength="10"

                /td

                td colspan="4"

                    第二个数:

                    input type="text" id="n2" size="4" maxlength="10"  

                /td

                td colspan="4"

                    结果:

                    input type="text" id="n3" size="4" maxlength="10"

                /td

            /tr

            tr

                td colspan="3"

                    input type="button" name="button" id="button1" value="+" onclick="add()"

                /td

                td colspan="3"

                    input type="button" name="button" id="button2" value="-" onclick="minx()"

                /td

                td colspan="3"

                    input type="button" name="button" id="button3" value="*" onclick="plus()"

                /td

                td colspan="3"

                    input type="button" name="button" id="button4" value="/" onclick="divd()"

                /td

            /tr

        /table

    /body

/html

以上代码是我修改后的，你的代码有几个问题：

没有方法 document.getElementsByld，应该是document.getElementById，注意：你用的是'L'，应该是'哎'。同时html中input的name="n1"，name="n2"，name="n3"修改为id="n1"，id="n2"，id="n3"。

var n2=parseInt(document.getElementsByld（'n2').value); 你每次获取n2的值的时候用的是中文的前括号，js里面是不允许的。

document.getElementsByld（'n3').value)=n3; 在个n3赋值的时候，前括号也是中文的，value后面多了一个后括号。

简易计算器js代码

是点击0-9然后点击加减乘除吗？

原理：获取第一个值 获取 运算符 获取第二个值 直接用js相应的运算符计算出值 然后显示到相应位置，如果再次点击运算符 则把此结果当做第一个值 重复前面的程序。如果是点击的数字 则把第一个值重新赋值 执行前面的程序

按键盘的话？

原理：需要正则匹配。。

简易的加减乘除的计算器代码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计算器完整代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js计算器代码怎么让数字不消失、js计算器完整代码的信息别忘了在本站进行查找喔。