用javascript实现计算器功能的方法：【function init(){ var num=document.getElementById(num); num.value=0; var btn_num1; var fh; ...】。
本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。
想必大家在学习编程语言的过程中都曾写过计算器功能，比如使用PHP、java、python等语言。那么你有没有使用过javascript实现过计算器功能呢？其实原理都是一样的，让我们一起来看看吧！
<!DOCTYPE html> <html> <head> <title>js计算器</title> <link rel=stylesheet type=text/csshref=index.css> <script type=text/javascript src=index.js> </script> </head> <body onload=init()> <!-- 1个文本框10个数字....20个按钮 --> <div id=div1> <form action=> <div id=div2> <input type=text name=num disabled=disabled id=num value=0> </div> </form> <div id=div3> <input type=button name= value=C id=baidu> <input type=button name= value=← id=> <input type=button name= value=+/- id=> <input type=button name= value=/ id=> <input type=button name= value=7 id=> <input type=button name= value=8 id=> <input type=button name= value=9 id=> <input type=button name= value=* id=> <input type=button name= value=4 id=> <input type=button name= value=5 id=> <input type=button name= value=6 id=> <input type=button name= value=- id=> <input type=button name= value=1 id= > <input type=button name= value=2 id= > <input type=button name= value=3 id= > <input type=button name= value=+ id=> <input type=button name= value=0 id=> <input type=button name= value== id=> <input type=button name= value=. id=> <input type=button name= value=AC id=> </div> </div> </body> </html>`
JS代码：
function init(){
var num=document.getElementById(num);
num.value=0;
var btn_num1;
var fh;
num.disabled=disabled;
// var n1=document.getElementById(n1);
// n1.οnclick=function(){
// }
var oButton=document.getElementsByTagName(input);
for(var i=0;i<oButton.length;i++){
oButton[i].onclick=function(){
if(isnumber(this.value)){
//num.value=(num.value+this.value)*1;//把默认0消除
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
//测试功能是否正确
// alert(bushishuzi)
var btn_num=this.value;
//测试功能是否正确（弹窗）
// alert(btn_num);
switch(btn_num){
case +:
// alert(11);
btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number
num.value=0;
fh=+;
break;
case -:
btn_num1=num.value*1;
num.value=0;
fh=-;
break;
case *:
btn_num1=num.value*1;
num.value=0;
fh=*;
break;
case /:
btn_num1=num.value*1;
num.value=0;
fh=/;
break;
case .:
num.value=dec_number(num.value);
break;
case ←:
num.value=back(num.value);
break;
case +/-:
num.value=sign(num.value);
break;
case AC:
num.value=0;
break;
case C:
init_baidu();
break;
case =:
switch(fh){
case+:
num.value=btn_num1+num.value*1;
break;
case-:
num.value=btn_num1-num.value*1;
break;
case*:
num.value=btn_num1*num.value*1;
break;
case/:
if(num.value==0){
num.value=0;
alert(除数不能为0);
}else{
num.value=btn_num1/num.value*1;
}
break;
}
break;
}
}
}
}
}
//小数点的功能
function dec_number(n){
if(n.indexOf(.)==-1){
n=n+.;
}
return n;
}
//验证文本框是否为空或者为0
function isNull(n){
if(n*1==0||n.length==0){
return true;
}else{
return false;
}
}
//退位键
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n=0;
}
return n;
}
//正负号+/-
function sign(n){
if(n.indexOf(-)==-1){
n=-+n;
}else{
n=n.substr(1,n.length);
}
return n;
}
//isNaN:不能转换成数字：true,可以转换成数字是false
function isnumber(n){
return !isNaN(n);
}
//C按钮使用一个超级链接，链接到百度，这个可以随便发挥
function init_baidu(){
window.location.href=http://www.baidu.com;
}CSS代码：
*{
margin:0px;
padding:0px;
}
div{
width:170px;
}
#div1{
top:60px;
left: 100px;
position:absolute;
}
input[type=button]{
width:30px;
margin-right: 5px;
}
input[type=text]{
width:147px;
text-align: right;
background-color:white;
border:1px solid;
padding-right:1px;
Box-sizing:content-Box;
}
input[type=button]:hover{/*//伪类和按钮的使用*/
background-color:white;
border:1px solid;
}推荐学习：javascript视频教程
