js简单计算机方法有哪些,JS实现简易计算器

用JS实现简易计算器，供大家参考，具体内容如下

首先创建结构和样式

Document

body{

margin:0;

padding:0;

background-color: #abcdef;

}

.cal{

width:560px;

height:100px;

margin:0 auto;

padding-top:300px;

}

+

=

2

然后添加Java script

Document

body{

margin:0;

padding:0;

background-color: #abcdef;

}

.cal{

width:560px;

height:100px;

margin:0 auto;

padding-top:300px;

}

+

=

2

var cal=document.querySelector(".cal");

var num1=cal.querySelector(".num1");

var num2=cal.querySelector(".num2");

var sign=cal.querySelector(".sign");

var res=cal.querySelector(".res");

var btns=cal.querySelectorAll(".btn");

btns[0].οnclick=add;

btns[1].οnclick=subtract;

btns[2].οnclick=multiply;

btns[3].οnclick=divide;

function add(){

sign.innerHTML="+";

//由于DOM获取到的值都是字符串形式，因此进行操作时需要先转为number类型

res.innerHTML=Number(num1.value)+Number(num2.value);

}

function subtract(){

sign.innerHTML="-";

res.innerHTML=Number(num1.value)-Number(num2.value);

}

function multiply(){

sign.innerHTML="*";

res.innerHTML=Number(num1.value)*Number(num2.value);

}

function divide(){

sign.innerHTML="/";

res.innerHTML=Number(num1.value)/Number(num2.value);

}

代码的优化：

循环实现绑定

给一个外部接口，用于新增运算

Document

body{

margin:0;

padding:0;

background-color: #abcdef;

}

.cal{

width:560px;

height:100px;

margin:0 auto;

padding-top:300px;

}

+

=

2

var cal=document.querySelector(".cal");

var num1=cal.querySelector(".num1");

var num2=cal.querySelector(".num2");

var sign=cal.querySelector(".sign");

var res=cal.querySelector(".res");

var btns=cal.querySelectorAll(".btn");

//给每个按钮绑定事件

for(var i=0;i

operate(i);

}

//运算函数

function operate(i){

var op=btns[i].value;//获取运算

var opName=btns[i].title;//获取运算名

//绑定事件

btns[i].οnclick=function(){

sign.innerHTML=op;

res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));

}

}

var operation={

add:function(n1,n2){

return n1+n2;

},

subtract:function(n1,n2){

return n1-n2;

},

multiply:function(n1,n2){

return n1*n2;

},

divide:function(n1,n2){

return n1/n2;

},

//给一个新增运算的接口

addOperation:function(name,fn){

//如果该运算不存在

if(!this.name){

this[name]=fn;

}

}

}

//新增取余运算

operation.addOperation("mod",function(n1,n2){

return n1%n2;

});

这样就圆满完成咯

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