javascript如何实现计算器功能

这次给大家带来javascript如何实现计算器功能，javascript实现计算器功能的注意事项有哪些，下面就是实战案例，一起来看一下。

这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：

var btns=[
            [
                {text:"AC",id:"btn_C",value:"c",col:1},
                {text:"Del",id:"btn_JJ",value:"✘",col:1},
                {text:"%",id:"btn_BF",value:"%",col:1},
                {text:"÷",id:"btn_CY",value:"/",col:1,cls:"yellow"},
            ],
            [
                {text:"7",id:"btn_C",value:"7",col:1},
                {text:"8",id:"btn_JJ",value:"8",col:1},
                {text:"9",id:"btn_BF",value:"9",col:1},
                {text:"×",id:"btn_CY",value:"*",col:1,cls:"yellow"},
            ],
            [
                {text:"4",id:"btn_C",value:"4",col:1},
                {text:"5",id:"btn_JJ",value:"5",col:1},
                {text:"6",id:"btn_BF",value:"6",col:1},
                {text:"-",id:"btn_CY",value:"-",col:1,cls:"yellow"},
            ],
            [
                {text:"1",id:"btn_C",value:"1",col:1},
                {text:"2",id:"btn_JJ",value:"2",col:1},
                {text:"3",id:"btn_BF",value:"3",col:1},
                {text:"+",id:"btn_CY",value:"+",col:1,cls:"yellow"},
            ],
            [
                {text:"0",id:"btn_C",value:"0",col:2},
                {text:".",id:"btn_JJ",value:".",col:1},
                {text:"=",id:"btn_BF",value:"=",col:1,cls:"gray"},
            ],
            ];
            function creatUI(config){
                var html=[];                
                for(var i=0,len=config.length;i");
                    var arry=config[i];                    
                    for(var j=0;j"+obj.text+"");
                    }
                    html.push("");
                }
            var b = document.getElementById("tbody");
                b.innerHTML=html.join("");
            }
            creatUI(btns);

整个计算器实现的主要代码是通过给计算器的每一个键添加点击事件，将其保存在一个数组中，在创建一些函数判断当前输入的值是否满足计算要求，如果满足将数组的值传递给eval( )函数，通过这个函数计算结果，并将结果传递给显示其相对应的p，通过innerText将其显示给用户，只要实现代码如下：

function register(){

                var container=document.getElementById("content");
                var tds=document.getElementsByTagName("td");
                var show=document.getElementById("show");                
                for(var i=0,len=tds.length;i
剩下的一些函数便是判断计算器能否进行计算，函数里面坑很多，大家注意，我将这个计算器的使用效果展示给大家： 


立即学习“Java免费学习笔记（深入）”；

							

								
								

									站长俱乐部购物系统
									
功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类
								
								下载 
							
						
整个计算器实现的所有代码如下：

    
        
        
        
    
    
        

            
0
            

                

            

        

        
    
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
JS设计模式之命令模式详解

javascript中call与apply以及bind有哪些不同