用js实现网页计算器,JS计算器

本文目录一览：

• 
  1、JS实现计算器
  


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


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


• 
  4、利用JS算术运算符实现一个简单的页面计算器功能。效果见下图:
  


• 
  5、如何使用JS完成一个简单的计算器功能
  


• 
  6、如何使用Javascript编写一个计算器
  

JS实现计算器

用 表单提交 或者超链接 或者 AJAX传递文本框内输入的数字

FormBean

int a //输入数1

int b //输入数2

String operator// 运算符

Action里面

先判断运算符 在调用相应的方法进行处理 返回页面

如果需要保留 用户输入的数字可以用ajax实现 或者Html标签实现

简单点就用Ajax实现

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

!doctype html    

html    

head    

title计算器/title    

meta charset="utf-8"/    

style type="text/css"    

.panel{    

   border:4px solid #ddd;    

width:192px;    

margin:100px auto;    

}    

.panel p,.panel input{    

   font-family:"微软雅黑";    

font-size:20px;    

margin:4px;    

float:left;    

}    

.panel p{    

   width:122px;    

height:26px;    

border:1px solid #ddd;    

padding:6px;    

overflow:hidden;    

}    

.panel input{    

  width:40px;    

height:40px;    

border:1px solid #ddd;    

}    

/style    

script type="text/Javascript"    

//参数e用来接收传入的event对象    

function cal(e){    

//1.获取事件源，处理button的事件    

var obj=e.srcElement||e.target;    

if(obj.nodeName !="INPUT"){    

  return;    

}    

var value=obj.value;    

var p=document.getElementById("screen");    

if(value=="C"){    

//2.如果是[C]，则清空p    

p.innerText="";    

}else if(value=="="){    

//3.如果是[=]，则运算    

var exp=p.innerText;    

try{    

var result=eval("("+exp+")");    

//如果正确执行，将结果写入p    

p.innerText=result;    

}catch(e){    

//发生错误，给予错误提示    

  p.innerText="Error.";    

}    

}else{    

//4.如果是其它按钮，则将value追加到p中    

p.innerText+=value;    

}    

}    

/script    

/head    

body    

!--在最外层的div上注册单击事件，传入event对象，然后在函数中通过event判断出事件来源于哪一个button，    

    进而做出应有的处理。这样的好处是，避免在button上大量的注册事件。--    

div class="panel" OnClick="cal(event);"    

div    

p id="screen"/p    

input type="button" value="C"    

div /div    

/div    

div    

input type="button" value="7"    

input type="button" value="8"    

input type="button" value="9"    

input type="button" value="/"    

input type="button" value="4"    

input type="button" value="5"    

input type="button" value="6"    

input type="button" value="*"    

input type="button" value="1"    

input type="button" value="2"    

input type="button" value="3"    

input type="button" value="-"    

input type="button" value="0"    

input type="button" value="."    

input type="button" value="="    

input type="button" value="+"    

div /div    

/div    

/body    

/html

这是我自学时候写的计算器

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

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

html

head

titlejs运算/title

boby

table

tr

td第一个数/td

tdinput type="text" id="onesum"/td

/tr

tr

td运算符号/td

tdinput type="text" id="fh"/td

/tr

tr

td第二个数/td

tdinput type="text" id="twosum"/td

/tr

tr

td计算结果/td

tdinput 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 check_validate1(value){ //首先只允许那两个输入框只能输入数字

//定义正则表达式部分

var reg = /^\d+$/;

if( value.cOnstructor=== String ){

var re = value.match( reg );

return true;

}

return false;

}

function test(id){ //你那些按钮的ID 你可以自己定一个规则

var num1 = parseFloat($('#id1').val());

var num2 = parseFloat($('#id2').val());

switct(id)

{

case 1 :

return num1 + num2 ;

case 2:

return num1 - num1 ;

case 3

...

...

//我这里的规则就是 1 2 3 4...按照你的按钮顺序来的

}

}

如何使用JS完成一个简单的计算器功能

你好大意啊，id取错了

    var firnum = parseInt(document.getElementById("txt1").value);   

//获取第二个输入框的值

    var secnum = parseInt(document.getElementById("txt2").value);

这样就对了！

如何使用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"

/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" id="simpleEqu"

/td

/tr

tr

td colspan="2"

input type="button"  value="0"   class="btn_color3 btn_number"

/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);

}

}