js实现计算器效果

it2022-05-06  0

如何利用js实现计算器功能呢?下面请看代码!

处理情况:1).用户直接输入符号,点击= 2).用户直接输入数字和符号,点击= 3).用户直接输入正确,点击= 不是C 也不是= -1).用户按了数字,按了+ 按了-,最后应该是-

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #btns{ width: 250px; height: 200px; border: 1px solid #ccc; } #d{ width: 200px; height: 100px; border: 1px solid red; } </style> </head> <body> <div id="d"></div> <div id="btns"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <br><br> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <br><br> <button>9</button> <button>0</button> <button>+</button> <button>-</button> <br><br> <button>*</button> <button>/</button> <button>%</button> <button>=</button> </div> <script> //给div添加事件 btns.addEventListener("click",calc); //定义计算函数 function calc(e){ //除了C = 其他都是拼接 var tag=e.target; //如果点击的是button按钮 if(tag.nodeName=="BUTTON"){ //将按钮文本拿出 var txt=tag.innerHTML; //获取显示区域节点 var t=document.getElementById("d"); //获取显示区域字符串值 var str=t.innerHTML; switch(txt){ case "c":t.innerHTML="";break; case "=": try{ //分情况 //情况1,用户输入是符号 if(str==" "||str=="+"||str=="*"||str=="%"||str=="/"){ //将显示区域内容空 t.innerHTML=""; }else if(str.slice(-1)=="-"||str.slice(-1)=="+"||str.slice(-1)=="*"||str.slice(-1)=="%"){ //如果表达式末位是符号不做运算,去符号 t.innerHTML=str.slice(0,-1); //t.innerHTML=t.innerHTML; }else{ //用户直接输入正确,点击= t.innerHTML=eval(str); } }catch(err){ //将错误信息展示到文本区域 t.innerHTML=err.toString(); };break; //其他情况做拼接 default:t.innerHTML+=txt; str=t.innerHTML; //判断运算符后是不是数字 //判断表达式倒数第二个是不是符号,判断表达式最后一位是不是非数字,如果都是:表达式有2个相连符号,需要把最后一个符号替换倒数第二个符号 if((str.slice(-2,-1)=="-"||str.slice(-2,-1)=="+"||str.slice(-2,-1)=="*"||str.slice(-2,-1)=="%")&&str.slice(-1)!=Number){ t.innerHTML=str.slice(0,-2)+t; } } } } </script> </table> </body> </html>

刚入门不久,请多多指教!


最新回复(0)