javascript实现简单计算器

最新推荐文章于 2025-06-17 16:07:06 发布

原创

最新推荐文章于 2025-06-17 16:07:06 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数 #二维数组 #计算机

这篇博客介绍了如何使用JavaScript构建一个简单的计算器。计算器的实现基于二维数组存储键位，并通过函数处理显示和运算。主要内容包括为计算器按键添加点击事件，判断输入是否满足计算条件，使用eval()函数进行计算，并通过innerText更新结果显示。博主分享了代码实现和运行效果，并指出部分功能仍有改进空间，鼓励有兴趣的读者参与优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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<len;i++){
                    html.push("<tr>");
                    var arry=config[i];
                    for(var j=0;j<arry.length;j++)
                    {
                        var obj=arry[j];
                        html.push("<td colspan="+obj.col+" class='"+obj.cls+"' v='"+obj.value+"'>"+obj.text+"</td>");
                    }
                    html.push("</tr>");
                }
            var b = document.getElementById("tbody");
                b.innerHTML=html.join("");
            }
            creatUI(btns);

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

function register(){
   
   

                var container=

最低0.47元/天解锁文章

200万优质内容无限畅学