计算机php js开发,如何用JS来生成一个简单计算机

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

第一步：html写好结构

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

js简单计算器

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)

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;i

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

var txt=this.innerHTML;

/*按键情况分类*/

if(!isNaN(txt)||txt==".")

{

key=false;

if(text.value==0 && txt!=".")

{

text.value=txt;

}

else/*(text.value==0&&txt==".")*/

{

if(text.value.indexOf(".")!=-1)//indexOf()检索的字符串值没有出现，则该方法返回 -1；

{

if(txt!=".")

{

text.value+=txt;

}

}

else

{

text.value+=txt;

}

}

}

else if(txt=='+'||txt=='-'||txt=='*'||txt=='/')

{

if(key) {

if (isNaN(res[res.length-1])&&res.length>0)

{

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=[];

}

}

}