如何用JS来生成一个简单计算机

本篇文章给大家分享的内容是如何用JS来生成一个简单计算机，有着一定的参考价值，有需要的朋友可以参考一下

第一步：html写好结构

用到p元素、table元素、input元素、button元素

    
    
    



        

            

                

            
            

                
C
                
D
            
            

                
7
                
8
                
9
                
+
            
            

                
4
                
5
                
6
                
-
            
            

                
1
                
2
                
3
                
*
            
            

                
.
                
0
                
=
                
/
            
        

第二步：css添加样式 使用外部样式链接 counter.css

*{
    margin: 0;
    padding: 0;
}
p{
    width: 290px;
    height: 338px;
    margin: 20px auto;
    border: 1px solid black;
}
#input,#reset,.click{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
#input{
    width: 282px;
    height: 50px;
    text-align: right;
}
#reset{
    width: 142px;
    height: 50px;
}
#reset1{
    width: 142px;
    height: 50px;
}
.click{
    display: inline-block;
    width: 70px;
    height: 55px;
}

第三步：添加js事件对计算机进行操作

  思路：

用到的知识点：

indexOf()方法返回某个指定字符串值在字符串中首次出现的位置；

语法 stringObject.indexOf(substring,startpos)

join() 方法用于把数组中的所有元素放入一个字符串。

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码；

语法：eval(string)

易想商务网

YxB2B商务网是易想网络旗下的门户型B2B行业网站系统，采用先进的标签技术和静态生成技术，通过网站后台管理轻松实现网站前台多种风格和会员网站多风格，让每一个只要懂得简单网页制作常识的网友，轻松制作出精美专业的的行业商务网站系统。系统高速、稳定、安全，完全仿阿里巴巴功能设计，有供应信息、求购信息、产品库、公司库、专项商机、行业信息、展会服务、人才市场、会员助手、网商博客、商友论坛、全方位搜索等栏目

下载

substr()方法从字符串中提取从startPos位置开始的指定数目的字符串；

语法：stringObject.substr(startPos,length)

代码：

/*获取操作对象*/
var key=false;
var res=[];
var text=document.getElementById("input");
var btn=document.getElementsByClassName("click");

for(var i=0;i0)
                {
                    res[res.length-1]=txt;
                    return;
                }

            }
            key=true;
            res[res.length]=text.value;
            res[res.length]=txt;
            text.value=0;
        }
        else if(txt=='C')
        {
            res=[];
            text.value=0;
        }
        else if(txt=='D')
        {
            text.value=text.value.substr(0,text.value.length-1);
        }
        else if(txt=='=')
        {
            res[res.length]=text.value;
            //text.value=eval(res.split(" ",res.length-1));
            console.log(res);//输出分割后的数组
            text.value=eval(res.join(""));//join("")字符串用空格分割，eval()字符串转化为数值，用数值运算赋给文本框
            res=[];
        }
    }
}