第一步:html写好结构
用到p元素、table元素、input元素、button元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js简单计算器</title> <link rel="stylesheet" href="counter.css"> </head> <body> <p> <table> <tr> <td colspan="4"><input type="text" id="input" value="0"></td> </tr> <tr> <td colspan="2"><button class="click" id="reset">C</button></td> <td colspan="2"><button class="click" id="reset1">D</button></td> </tr> <tr> <td><button class="click">7</button></td> <td><button class="click">8</button></td> <td><button class="click">9</button></td> <td><button class="click">+</button></td> </tr> <tr> <td><button class="click">4</button></td> <td><button class="click">5</button></td> <td><button class="click">6</button></td> <td><button class="click">-</button></td> </tr> <tr> <td><button class="click">1</button></td> <td><button class="click">2</button></td> <td><button class="click">3</button></td> <td><button class="click">*</button></td> </tr> <tr> <td><button class="click">.</button></td> <td><button class="click">0</button></td> <td><button class="click">=</button></td> <td><button class="click">/</button></td> </tr> </table> </p> <script type="text/javascript" src="counter.js"></script> </body> </html>
第二步: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.length;i++){ btn[i].onclick=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=[]; } } }
以上就是如何用JS来生成一个简单计算机的详细内容,更多请关注php中文网其它相关文章!